Ajax + php Data Interaction and partial page refreshing implementation details, ajax page refreshing

Ajax + php Data Interaction and partial page refreshing implementation details, ajax page refreshing

What Is Ajax?

Chinese translators often say "AJAX" is the same as AJAX football team. AJAX is a technology used to create fast dynamic web pages. It is not a new language, but a new method to use existing standards. By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on the webpage, so that a part of the webpage can be updated without reloading the entire webpage.

XMLHttpRequest is the basis of AJAX and is used to exchange data with the server. All modern browsers support XMLHttpRequest objects (IE5 and IE6 use ActiveXObject)

The following article mainly introduces how to use ajax to interact with php Data and partially refresh the page. I will not talk about it here. Let's take a look at the details:

1. Syntax Introduction

1.1 Basic ajax syntax

$. Ajax ({type: "post", // data submission method (post/get) url: "http: // xxx/test/demo. php ", // submitted url data: {username: username, password: password}, // submitted data dataType:" json ", // returned data Type format success: function (msg ){... // return the successful callback function}, error: function (msg ){... // return the failed callback function }});

1.2 Receiving Method for php

<! --? Php $ username = $ _ POST ['username']; // receives username data submitted in post mode $ password = $ _ POST ['Password'];?>

Ii. Detailed examples

2.1 htmlterminal code demo.html

<! Doctype html> 
2.2 Add the following js Code to demo.html:

<Script> $ (function () {$ ('# sub '). click (function () {var username = $ ('# username '). val (); var password = $ ('# password '). val (); $. ajax ({type: "post", url: "http: // xxx/test/demo. php ", data: {username: username, password: password}, // submit to demo. the data dataType of php: "json", // the data format success: function (msg) {$ ('# text') that the callback function receives data '). empty (); // clear all content in Text var data = ''; if (msg! = '') {Data = eval (" ("+ msg +") "); // parse the returned json data and assign it to data} response ('{text'}.html (" username: "+ data. username + ", password:" + data. password); // output the console in # text. log (data); // console output}, error: function (msg) {console. log (msg) ;}}) ;}) </script>
2.3 php code demo. php

<! --? Php header ('content-type: text/json; charset = UTF-8 '); $ username = $ _ POST ['username']; $ password = $ _ POST ['Password']; $ data = '{username :"'. $ username. '", password :"'. $ password. '"}'; // combined into json format data echo json_encode ($ data); // output json data?>
III. The final result is as follows:


Demo
Download demo
Summary
The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.