***Jquery下Ajax与PHP数据交换

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

  Javascript代码:

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

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

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

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

					 $(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代码:

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

显示效果如下图所示:

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

  Javascript代码:

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

					 $(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代码:

					  <?php
      header(‘Content-Type:text/html; charset=gb2312‘);//使用gb2312编码,使中文不会变成乱码

      //读取第一个数组
      $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;
 ?>

显示效果如下图:

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

  Javascript代码:

					  $(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成功
             var back="";
             for(var i=0;i<(data.length);i++){
                 for(var j=0;j<data[0].length;j++){
                     back+=" "+i+" 行 "+j+" 列 :"+data[i][j]+" ";
                 }
                 back+="\n";
             }
             alert(back);
         }
     });
 });

  PHP代码:

					 <?php
     header(‘Content-Type:text/html; charset=gb2312‘);//使用gb2312编码,使中文不会变成乱码
     $backValue=array();
     $backValue[0]=$_POST[‘trans_data‘];
     $backValue[1]=$_POST[‘trans_data1‘];

     echo json_encode($backValue);
 ?>

显示效果如下图:

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

  Javascript代码:

					 $(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成功
             var back="";
             for(var i=0;i<(data.length);i++){
                 for(var j=0;j<data[0].length;j++){
                     back+=" "+i+" 行 "+j+" 列 :"+data[i][j]+" ";
                 }
                 back+="\n";
             }
             alert(back);
         }
     });

 });

  PHP代码:

					 <?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‘];

     echo json_encode($backValue);
 ?>

显示效果如下图:

时间: 2025-01-02 14:04:15

***Jquery下Ajax与PHP数据交换的相关文章

jQuery 完成ajax传送jsonObject数据,并在后台处理

效果图: 1.js文件封装的几个js工具 <span style="font-family:KaiTi_GB2312;font-size:18px;">//兼容ie if (typeof JSON == 'undefined') { $("head").append($("<script type='text/javascript' src='http://www.huimg.cn/app/baikesurvey/js/json2.js'

jquery实现ajax,返回json数据

jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback是回调函数,而type是返回数据的类型.type有xml,html,json,text等. 首先,页面引用jquery.js 在页面写ajax处理的js函数 1 2 3 4 5 6 7 8 9 10 11 12 13 function initMeeting() {             $.ge

jquery autocomplete ajax获取动态数据,兼容各浏览器,支持中文

jquery.autocomplete.js经过改动,支持各种浏览器.支持中文输入! 1.效果图例如以下 2.HTML和ajax代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html

jQuery、ajax提交fromdata数据

需求说明:简单演示ajax提交fromData类型数据. 代码说明:ajax在传输数据的时候基本格式大都是固定的,只需要修改传输类型即可.下面介绍基本的参数提交. 步骤一:建立html或者jsp页面,引入jquery-3.2.1.min.js(其他版本亦可). 步骤二:建立文件选择输入框,上传按钮并给其ID赋值. 步骤三:编写jQuery.ajax代码,完成上传到指定controller. 下面是示例代码: <!DOCTYPE html><html lang="en"

IE浏览器下ajax缓存导致数据不更新的解决方法

摘自:http://www.iefans.net/ie-ajax-json-shuju-huancun/ 最近做设计的时候遇到一个小问题,当你用jquery的getjson函数从后台获取数据的时候,IE浏览器会自动设置缓存,如果此时你对数据进行修改的时候刷新页面,IE并不会在页面显示你修改后的数据,因为你刷新的时候IE浏览器会查找缓存并显示你修改前的数据,最后在网上查了些资料终于解决了IE浏览器下的问题. 方法就是在你的请求的URL 后面设置个可变的参数,比如: Java代码 $.getJSON

js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装

function ajax(obj){ // 默认参数 var defaults = { type : 'get', data : {}, url : '#', dataType : 'text', async : true, success : function(data){console.log(data)} } // 处理形参,传递参数的时候就覆盖默认参数,不传递就使用默认参数 for(var key in obj){//把输入的参数与设置的默认数据进行覆盖更新 defaults[key]

html、css/bootStrap、js/Jquery、ajax与json数据交互总结

设计个个人网站,利用CSS.JavaScript.HTML5.jQuery库和AJAX等 实现网站各功能模块,下面介绍我设计的网站各大功能模块:  个人简历模块: 包涵个人基本信息(利用CSS的float和clear属性实现个人照片与文字的浮动排版).求学经历.获奖情况.参与社团.兴趣爱好等(一个方面组织成一张网页),利用框架技术实现在同一区域显示不同网页内容. 注册/登入模块 用户注册和登录:使用jQuery实现注册表单验证和登录表单验证 登入首页 利用文字.图片(使用AJAX实现图片轮转)展

jquery 下拉刷新绑定数据

var page = 1, Ssize = 0; function Paging() { $(window).scroll(function () { if ($(document).scrollTop() + $(window).height() >= $(document).height()) { page++;     GetList(page, Ssize) } })} function GetList(page, size) { Ssize = size; var tr = "&

jQuery选取所有复选框被选中的值并用Ajax异步提交数据

昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: 1 <body> 2 <div> 3 <input type=&quo