Comprehensive analysis of Ajax comprehensive applications

AJAX = Asynchronous JavaScript and XML, AJAX is a technology for creating fast, dynamic web pages. This article brings you a comprehensive analysis of the comprehensive application of Ajax. It is very good and has reference value. Friends who are interested should take a look at it.

AJAX stands for "Asynchronous Javascript And XML" (asynchronous JavaScript and XML). Refers to a web development technology for creating interactive web applications.

AJAX = Asynchronous JavaScript and XML (a subset of Standard Universal Markup Language).

AJAX is a technology for creating fast, dynamic web pages.

By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of a web page can be updated without reloading the entire page.

Traditional web pages (not using AJAX) must reload the entire web page if the content needs to be updated.

•"xml": Returns an XML document that can be processed with jQuery.

•"html": Returns plain text HTML information; the included script tag will be executed when inserted into the dom.

•"script": Returns plain text JavaScript code. Results are not automatically cached. Unless the "cache" parameter is set. Note: When making remote requests (not under the same domain), all POST requests will be converted into GET requests. (Because the DOM script tag will be used to load)

•"json": Returns JSON data.

•"jsonp": JSONP format. When calling a function using JSONP form, such as "myurl?callback=?" jQuery will automatically replace ? with the correct function name to execute the callback function.

•"text": Returns a plain text string

1. Pass string variables to the frontend and return string variables to the backend (non-json format)

Here, in order to solve the garbled Chinese characters that appear in Ajax data transfer, before the string is transferred, the javascript function escape() is used to encode the Chinese character string and return # The string of

## is decoded using the unescape() function so that Chinese characters can be displayed normally. Of course, the background PHP code also adds header files to ensure that Chinese character strings will not be garbled. Various background codes solve the problem of garbled Chinese characters in the following ways:

PHP:

header('Content-Type:text/html;charset=GB2312');

　

Javascript code:

$(function(){
var my_data="前台变量";
my_data=escape(my_data)+"";//编码，防止汉字乱码
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data},
//dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(unescape(data));//解码，显示汉字
}
});
});

PHP code:

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码，使中文不会变成乱码
$backValue=$_POST['trans_data'];
echo $backValue."+后台返回";

## 2. Multiple front-end transfers A one-dimensional array, the background returns a string variable (non-json format)

In non-json format, the background can only return strings. If you want to return an array in the background, you can use json format , which will be introduced in detail later in this article.

Javascript code:

$(function(){
var my_data=new Array();
var my_data1=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1},
//dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(data);
}
});
});

##PHP code:

//读取第一个数组
$backValue="trans_data:";
$trans=$_POST['trans_data'];
foreach($trans as $value)
{
$backValue=$backValue." ".$value;
}
//读取第二个数组
$backValue=$backValue." , trans_data1:";
$trans=$_POST['trans_data1'];
foreach($trans as $value)
{
$backValue=$backValue." ".$value;
}
echo $backValue;

3. Pass multiple one-dimensional arrays to the front end, and return two-dimensional arrays (json format) in the background

Javascript code:

$(function(){
var my_data=new Array();
var my_data1=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data){//如果调用php成功
}
alert(back);
}
});
});

PHP code:

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码，使中文不会变成乱码
$backValue=array();
$backValue[0]=$_POST['trans_data'];
$backValue[1]=$_POST['trans_data1'];
echo json_encode($backValue);

4. Pass one-dimensional array and two-dimensional array to the front end, and return two-dimensional array (json format) in the background

Javascript code:

$(function(){
var my_data=new Array();
var my_data1=new Array();
var my_data2=new Array();
my_data[0]=0;
my_data[1]=1;
my_data[2]=2;
my_data1[0]=10;
my_data1[1]=11;
my_data1[2]=12;
my_data2[0]=my_data;
my_data2[1]=my_data1;
$.ajax({
url: "ajax_php.php",
type: "POST",
data:{trans_data:my_data,trans_data1:my_data1,trans_data2:my_data2},
dataType: "json",
error: function(){
alert('Error loading XML document');
},
success: function(data){//如果调用php成功
}
alert(back);
}
});
});

PHP code:

header('Content-Type:text/html; charset=gb2312');//使用gb2312编码，使中文不会变成乱码
$backValue=array();
$backValue=$_POST['trans_data2'];
$backValue[2]=$_POST['trans_data'];
$backValue[3]=$_POST['trans_data1'];
echo json_encode($backValue);

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use Nginx reverse proxy to avoid ajax cross-domain requests

In-depth analysis of Nginx Implementing AJAX cross-domain request issues

##Comprehensive analysis of $.Ajax() method parameters (graphic tutorial)

The above is the detailed content of Comprehensive analysis of Ajax comprehensive applications. For more information, please follow other related articles on the PHP Chinese website!