全面解析Ajax综合应用(全)
AJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX=异步JavaScript和XML(标准通用标记语言的子集)。
AJAX是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页页面。
•"xml":返回XML文档,可用jQuery处理。
•"html":返回纯文本HTML信息;包含的script标签会在插入dom时执行。
•"script":返回纯文本JavaScript代码。不会自动缓存结果。除非设置了"cache"参数。注意:在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
•"json":返回JSON数据。
•"jsonp":JSONP格式。使用JSONP形式调用函数时,如"myurl?callback=?"jQuery将自动替换?为正确的函数名,以执行回调函数。
•"text":返回纯文本字符串
一、前台传递字符串变量,后台返回字符串变量(非json格式)
这里,为了解决Ajax数据传递出现的汉字乱码,在字符串传递之前,使用javascript函数escape()对汉字字符串进行了编码,并且对返回
的字符串使用unescape()函数进行解码,使得汉字得以正常显示。当然了,后台PHP代码也添加了头文件,以保证汉字字符串不会出现乱码。各种后台代码解决
汉字乱码问题的方式如下:
PHP:header('Content-Type:text/html;charset=GB2312');
Javascript代码:
$(function(){ varmy_data="前台变量"; my_data=escape(my_data)+"";//编码,防止汉字乱码 $.ajax({ url:"ajax_php.php", type:"POST", data:{trans_data:my_data}, //dataType:"json", error:function(){ alert('ErrorloadingXMLdocument'); }, success:function(data,status){//如果调用php成功 alert(unescape(data));//解码,显示汉字 } }); });
PHP代码:
header('Content-Type:text/html;charset=gb2312');//使用gb2312编码,使中文不会变成乱码 $backValue=$_POST['trans_data']; echo$backValue."+后台返回";
二、前台传递多个一维数组,后台返回字符串变量(非json格式)
在非json格式下,后台只能返回字符串,如果想后台返回数组,可以采用json格式,在本文的后面会详细介绍。
Javascript代码:
$(function(){ varmy_data=newArray(); varmy_data1=newArray(); 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('ErrorloadingXMLdocument'); }, success:function(data,status){//如果调用php成功 alert(data); } }); });
PHP代码:
//读取第一个数组 $backValue="trans_data:"; $trans=$_POST['trans_data']; foreach($transas$value) { $backValue=$backValue."".$value; } //读取第二个数组 $backValue=$backValue.",trans_data1:"; $trans=$_POST['trans_data1']; foreach($transas$value) { $backValue=$backValue."".$value; } echo$backValue;
三、前台传递多个一维数组,后台返回二维数组(json格式)
Javascript代码:
$(function(){ varmy_data=newArray(); varmy_data1=newArray(); 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('ErrorloadingXMLdocument'); }, success:function(data){//如果调用php成功 } alert(back); } }); });
PHP代码:
header('Content-Type:text/html;charset=gb2312');//使用gb2312编码,使中文不会变成乱码 $backValue=array(); $backValue[0]=$_POST['trans_data']; $backValue[1]=$_POST['trans_data1']; echojson_encode($backValue);
四、前台传递一维数组和二维数组,后台返回二维数组(json格式)
Javascript代码:
$(function(){ varmy_data=newArray(); varmy_data1=newArray(); varmy_data2=newArray(); 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('ErrorloadingXMLdocument'); }, success:function(data){//如果调用php成功 } alert(back); } }); });
PHP代码:
header('Content-Type:text/html;charset=gb2312');//使用gb2312编码,使中文不会变成乱码 $backValue=array(); $backValue=$_POST['trans_data2']; $backValue[2]=$_POST['trans_data']; $backValue[3]=$_POST['trans_data1']; echojson_encode($backValue);
以上内容是小编给大家介绍的全面解析Ajax综合应用大全,希望能够帮助到大家!