Home  >  Article  >  Backend Development  >  How to implement js calling php files

How to implement js calling php files

PHPz
PHPzOriginal
2023-04-19 09:15:421577browse

With the continuous development of Internet technology, more and more websites need to implement JavaScript to call PHP files to achieve front-end and back-end data interaction. This article will introduce how to implement JS to call PHP files.

1. JS calls PHP files

JS calls PHP files mainly through Ajax technology. Ajax (Asynchronous JavaScript And XML) is a development technology for web applications that uses asynchronous mechanisms to refresh pages asynchronously and improve user experience. To call PHP files in JS, you need to use the XMLHttpRequest object.

2. XMLHttpRequest object

The XMLHttpRequest object is a built-in object in JavaScript, through which asynchronous communication with the server can be achieved. The XMLHttpRequest object has the following attributes and methods:

1.open(): Create a new HTTP request and specify the request method, URL address and whether to transmit asynchronously.

2.setRequestHeader(): Set request header information.

3.send(): Send HTTP request.

4.onreadystatechange(): Callback function when requesting state change.

3. Example Demonstration

The following is a piece of code to demonstrate how to implement JS calling PHP files:

1. First create an HTML file, as shown below:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS调用PHP文件</title>
<script type="text/javascript">
function load(){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status==200){
      document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
  }
  xhr.open("POST","demo.php",true);
  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xhr.send("name=Peter&age=18");
}
</script>
</head>
<body>

<div id="myDiv"><h1>点击下面的按钮,加载PHP文件内容</h1></div>

<input type="button" value="点击加载PHP文件内容" onclick="load()">
</body>
</html>

2. Create a file named demo.php in the same directory. The file code is as follows:

<?php
$name=$_POST[&#39;name&#39;];
$age=$_POST[&#39;age&#39;];
echo "您好,".$name.",您的年龄是".$age."岁。";
?>

3. Open the HTML file in the browser and click the button to load the demo The contents of the .php file. The passed parameters are obtained in the demo.php file, corresponding content is generated based on the parameters, and output through the echo statement.

4. Notes

1. When writing a PHP file, you need to use the echo statement to output the generated content so that JS can obtain the data.

2. When calling a PHP file in JS, you need to specify the request method (GET or POST), URL address, passed parameters and other information.

3. In the PHP file, you need to use $_POST, $_GET and other variables to obtain the parameter values ​​passed by JS.

4. When calling a PHP file, you need to wait for the server response, so you need to define a callback function in JS to receive the processing results after the server response.

5. Summary

Through the introduction of this article, we have learned how to implement JS to call PHP files, mainly through Ajax technology. During the implementation process, you need to pay attention to details such as the form of passing parameters, the way to write PHP files, and the implementation of callback functions. For websites that need to realize front-end and back-end data interaction, this method can improve the response speed of the page and improve the user experience.

The above is the detailed content of How to implement js calling php files. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn