PHP page does not refresh and update data

php page does not refresh and update data

php page does not refresh and update data is very simple to implement, we can use Front-end ajax technology.

The role of ajax: The purpose of ajax technology is to allow javascript to send http requests, communicate with the background, and obtain data and information. Achieve front-end and back-end separation. The principle of ajax technology is to instantiate the xmlhttp object and use this object to communicate with the background. The process of ajax communication will not affect the subsequent execution of javascript, thus achieving asynchronous implementation.

The main problem that ajax solves in js is: without refreshing the current page, passing certain data to the server, and getting certain data back from the server to the client.

1. Five-step strategy in html:

1. Establish AJAX core object

ar xhr=new XMLHttpRequest();

2. Add preloading; refers to if The function is triggered when the prepared state of the xhr object changes.

xhr.addEventListener("load",loadHandler);

3. Establish a connection

xhr.open("GET","http://localhost/index.php?user=zhangsan");

Parameter issues in establishing a connection, syntax:

xhr.open("get", url, true);

Note:

in the open() method One parameter refers to the sending method of the request, and the value is get or post.

The second parameter refers to the requested url path, which is the path of the php file you wrote,? What follows is the relevant information that the carried get needs to obtain.

The third parameter refers to whether the request is asynchronous or synchronous. If you write true, it means asynchronous (default true), and if you write false, it means synchronous.

4. Initiate a request to the server

xhr.send();

Syntax:

xhr.send();

Note: If the request is sent in get mode, there is no need to write any parameters in the send() command

The transferred data can be written in the url, and the server uses $_GET["parameter name"] to receive it.​

If the request is sent in post mode, the request header needs to be set to correctly pass the data to the back-end page. We use the get method here, so there is no need to write any parameters.​

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
xhr.send(“数据名1=数据值&数据名2=数据值”);

The server uses $_POST["Parameter name"] to receive.

5. Declare the preloading function; receive the response

function loadHandler(){
   // 获取并使用服务器的响应
    console.log(xhr.response);
 
}

2· In the php file

Three steps:

header("content-type:text/html;charset=utf-8");

Set character encoding

header("Access-Control-Allow-Origin:*");

Set Access-Control-Allow-Origin to achieve cross-domain access (because different domain names are not allowed to communicate with each other by default)

echo $_GET["user"]."今天心情很好";

What to give to the front desk Data

4. Implement access:

Put the written php file into the www folder of phpStydy, as shown below:

1. Find the installation of phpStyle Directory

2. Open and find the www folder

3. Copy the PHP file you wrote to www Go inside the folder, such as the index.php file I just wrote;

4. Now implement simple ajax access;

Now run your html code:

#At this point, the page will not be refreshed and you can access the PHP data

For more PHP related knowledge, please visit PHP中文网!

The above is the detailed content of PHP page does not refresh and update data. For more information, please follow other related articles on the PHP Chinese website!