热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Jquery框架下Ajax与PHP数据交换

Jquery框架下Ajax与PHP数据交换,
   最近刚刚做了一个小项目,其中用到了大量的Ajax技术。当然了,刚开始用的时候,避免不了出现很多的错误,也走了汗多弯路,这里整理了出来,除了是为了供自己以后开发参考外,也是为了拿出来与大家分享,希望能让初学者少走弯路,也希望能够得到高手的批评与指正。  

一、前台传递字符串变量,后台返回字符串变量(非json格式)

  Javascript代码:

  这里,为了解决Ajax数据传递出现的汉字乱码,在字符串传递之前,使用Javascript函数escape()对汉字字符串进行了编码,并且对返回

的字符串使用unescape()函数进行解码,使得汉字得以正常显示。当然了,后台PHP代码也添加了头文件,以保证汉字字符串不会出现乱码。各种后台代码解决

汉字乱码问题的方式如下:

  PHP:header('Content-Type:text/html;charset=GB2312'); 
  ASP:Response.Charset("GB2312") 
  JSP:response.setHeader("Charset","GB2312"); 

 1 $(function(){
 2     var my_data="前台变量";
 3     my_data=escape(my_data)+"";//编码,防止汉字乱码
 4     $.ajax({
 5         url: "ajax_php.php",  
 6         type: "POST",
 7         data:{trans_data:my_data},
 8         //dataType: "json",
 9         error: function(){  
10             alert('Error loading XML document');  
11         },  
12         success: function(data,status){//如果调用php成功    
13             alert(unescape(data));//解码,显示汉字
14         }
15     });
16     
17 });

  PHP代码:

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

显示效果如下图所示:

 

  

                                                     

  二、前台传递多个一维数组,后台返回字符串变量(非json格式)

  Javascript代码:

  在非json格式下,后台只能返回字符串,如果想后台返回数组,可以采用json格式,在本文的后面会详细介绍。

 1 $(function(){
 2     var my_data=new Array();
 3     var my_data1=new Array();
 4     my_data[0]=0;
 5     my_data[1]=1;
 6     my_data[2]=2;
 7     
 8     my_data1[0]=10;
 9     my_data1[1]=11;
10     my_data1[2]=12;
11     
12     $.ajax({
13         url: "ajax_php.php",  
14         type: "POST",
15         data:{trans_data:my_data,trans_data1:my_data1},
16         //dataType: "json",
17         error: function(){  
18             alert('Error loading XML document');  
19         },  
20         success: function(data,status){//如果调用php成功    
21             alert(data);
22         }
23     });
24     
25 });

  PHP代码:

 1 php
 2     header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码
 3     
 4     //读取第一个数组
 5     $backValue="trans_data:";
 6     $trans=$_POST['trans_data'];
 7     foreach($trans as $value)
 8     {
 9         $backValue=$backValue." ".$value;
10     }
11     
12     //读取第二个数组
13     $backValue=$backValue." , trans_data1:";
14     $trans=$_POST['trans_data1'];
15     foreach($trans as $value)
16     {
17         $backValue=$backValue." ".$value;
18     }
19     echo $backValue;
20 ?>

显示效果如下图:

  三、前台传递多个一维数组,后台返回二维数组(json格式)

  Javascript代码:

 1 $(function(){
 2     var my_data=new Array();
 3     var my_data1=new Array();
 4     my_data[0]=0;
 5     my_data[1]=1;
 6     my_data[2]=2;
 7     
 8     my_data1[0]=10;
 9     my_data1[1]=11;
10     my_data1[2]=12;
11     
12     $.ajax({
13         url: "ajax_php.php",  
14         type: "POST",
15         data:{trans_data:my_data,trans_data1:my_data1},
16         dataType: "json",
17         error: function(){  
18             alert('Error loading XML document');  
19         },  
20         success: function(data){//如果调用php成功            
21             var back="";
22             for(var i=0;i<(data.length);i++){
23                 for(var j=0;j){
24                     back+=" "+i+" 行 "+j+" 列 :"+data[i][j]+" ";
25                 }
26                 back+="\n";
27             }
28             alert(back);
29         }
30     });
31     
32 });

  PHP代码:

1 php
2     header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码    
3     $backValue=array();
4     $backValue[0]=$_POST['trans_data'];    
5     $backValue[1]=$_POST['trans_data1'];
6     
7     echo json_encode($backValue);
8 ?>

显示效果如下图:

四、前台传递一维数组和二维数组,后台返回二维数组(json格式)

  Javascript代码:

 1 $(function(){
 2     var my_data=new Array();
 3     var my_data1=new Array();
 4     var my_data2=new Array();
 5     
 6     my_data[0]=0;
 7     my_data[1]=1;
 8     my_data[2]=2;
 9     
10     my_data1[0]=10;
11     my_data1[1]=11;
12     my_data1[2]=12;
13     
14     my_data2[0]=my_data;
15     my_data2[1]=my_data1;
16     
17     $.ajax({
18         url: "ajax_php.php",  
19         type: "POST",
20         data:{trans_data:my_data,trans_data1:my_data1,trans_data2:my_data2},
21         dataType: "json",
22         error: function(){  
23             alert('Error loading XML document');  
24         },  
25         success: function(data){//如果调用php成功            
26             var back="";
27             for(var i=0;i<(data.length);i++){
28                 for(var j=0;j){
29                     back+=" "+i+" 行 "+j+" 列 :"+data[i][j]+" ";
30                 }
31                 back+="\n";
32             }
33             alert(back);
34         }
35     });
36     
37 });

  PHP代码:

1 php
2     header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码    
3     $backValue=array();
4     $backValue=$_POST['trans_data2'];    
5     $backValue[2]=$_POST['trans_data'];    
6     $backValue[3]=$_POST['trans_data1'];
7     
8     echo json_encode($backValue);
9 ?>

显示效果如下图:

推荐阅读
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • Allegro总结:1.防焊层(SolderMask):又称绿油层,PCB非布线层,用于制成丝网印板,将不需要焊接的地方涂上防焊剂.在防焊层上预留的焊盘大小要比实际的焊盘大一些,其差值一般 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 在Android中解析Gson解析json数据是很方便快捷的,可以直接将json数据解析成java对象或者集合。使用Gson解析json成对象时,默认将json里对应字段的值解析到java对象里对应字段的属性里面。然而,当我们自己定义的java对象里的属性名与json里的字段名不一样时,我们可以使用@SerializedName注解来将对象里的属性跟json里字段对应值匹配起来。本文介绍了使用@SerializedName注解解析json数据的方法,并给出了具体的使用示例。 ... [详细]
  • express工程中的json调用方法
    本文介绍了在express工程中如何调用json数据,包括建立app.js文件、创建数据接口以及获取全部数据和typeid为1的数据的方法。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • 工作经验谈之-让百度地图API调用数据库内容 及详解
    这段时间,所在项目中要用到的一个模块,就是让数据库中的内容在百度地图上展现出来,如经纬度。主要实现以下几点功能:1.读取数据库中的经纬度值在百度上标注出来。2.点击标注弹出对应信息。3 ... [详细]
  • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
  • 我将SpringMVC升级到Spring3.2.5.我的一些剩余调用即使存在,也会返回无法识别的字段异常.这是错误.Resolvingexceptionfrom ... [详细]
  • asp.net(vb脚本)如何获取xml的节点值?xmlversion1.0encodingutf-8?rootimageimagemenusmenuurl#frame_paren ... [详细]
author-avatar
大大醯_804_224
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有