时间戳

首页 > 技术文章 > 13. jquery ajax json 学习

13. jquery ajax json 学习

rabbitq 2016-09-07 17:08 原文

1. 新浪博客上的一个例子，原作者 http://blog.sina.com.cn/s/blog_6ce9e8870101de3t.html

index.html

<html>
<head>
  <meta charset="utf-8">
<title>jQuery Ajax 实例演示</title>
</head>
<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){//这个就是jQueryready ，它就像C语言的main 所有操作包含在它里面
    $("#button_login").mousedown(function(){
    login(); //点击ID为"button_login"的按钮后触发函数 login();
    });

    function login(){ //函数 login();
        var username = $("#username").val();//取框中的用户名
        var password = $("#password").val();//取框中的密码
        $.ajax({ //一个Ajax过程
            type: "post", //以post方式与后台沟通
            url : "login.php", //与此php页面沟通
            dataType:'json',//从php返回的值以 JSON方式 解释
            data: 'username='+username+'&password='+password, //发给php的数据有两项，分别是上面传来的u和p
            success: function(json){//如果调用php成功
            //alert(json.username+'\n'+json.password); //把php中的返回值（json.username）给 alert出来
            $('#result').html("姓名:" + json.username + "<br/>密码:" + json.password); //把php中的返回值显示在预定义的result定位符位置
            }
        });
    }
    //$.post()方式：
    $('#test_post').mousedown(function (){
        $.post(
            'login.php',
            {
            username:$('#username').val(),
            password:$('#password').val()
            },
            function (data) //回传函数
            {
                var myjson='';
                eval_r('myjson=' + data + ';');
                $('#result').html("姓名1:" + myjson.username + "<br/>密码1:" + myjson.password);
            }
        );
    });
    //$.get()方式：
    $('#test_get').mousedown(function (){
        $.get(
            'login.php',
            {
            username:$('#username').val(),
            password:$('#password').val()
            },
            function(data) //回传函数
            {
                var myjson='';
                eval_r("myjson=" + data + ";");
                $('#result').html("姓名2:" + myjson.username + "<br/>密码2:" + myjson.password);
            }
        );
    });
});
</script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
<p><span>输入姓名:</span><input type="text" name="username" id="username" /></p>
<p><span>输入密码:</span><input type="text" name="password" id="password" /></p>
</form>
<button id="button_login">ajax提交</button>
<button id="test_post">post提交</button>
<button id="test_get">get提交</button>
</body>
</html>

login.php

<?php
echo json_encode(array ('username'=>$_REQUEST['username'],'password'=>$_REQUEST['password']));
?>

代码解释：

login.php ：

a. json_encode ：http://php.net/manual/en/function.json-encode.php 不复制过来了，几个例子都很好。

index.html：

a.$.ajax() : http://www.w3school.com.cn/jquery/ajax_ajax.asp

b.$.ajax() -> data: 两种办法：

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston", //第一种方式传参
  // data: {name:"John",location:"Boston"}  //第二种方式传参
  // data: {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'
  /*
 第一种我们用url传参，参数里面如果加带"&"这个符号的话，可能参数接收不到或不完整，
 如“ data: "name=John&location=Boston",” 如果name的值是"john&smith"这样写可能就会有问题，
 我们可以用JS里面的encodeURIComponent()方法进行转义，
 但如果用data: {name:"John",location:"Boston"}这种方式写的话就不需要进行转义*/

另一篇

  1. /** 
  2.  * 订单取消 
  3.  * @return {Boolean} 处理是否成功 
  4.  */  
  5. function orderCancel(orderId, commant){  
  6.     var flag = false;  
  7.     $.ajax({  
  8.         type: "POST",  
  9.         url: "../order/orderCancel.action", //orderModifyStatus  
  10.         data: {"orderId":orderId,"commant":commant},  
  11.         dataType:"json",  
  12.         async:false,  
  13.         cache:false,  
  14.         success: function(data){  
  15.             var member = eval("("+data+")"); //包数据解析为json 格式                                                            
  16.             if(member.success=="true"){  
  17.                 flag = true;  
  18.             }else if(member.success=="false") {  
  19.                 alert(member.info);  
  20.             }  
  21.         },  
  22.         error: function(json){  
  23.             alert("订单取消异常，请刷新后重试...");  
  24.         }  
  25.     });  
  26.     hidediv();  
  27.     return flag;  
  28. } 
 

c.$.ajax() -> success :

success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
         (1)由服务器返回，并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数

 关于json.password 的这个点 

有这么一篇博客：http://blog.csdn.net/haiqiao_2010/article/details/12653555

最近在用jquery的ajax方法传递接收json数据时发现一个问题，那就是返回的data数据，有时候可以直接作为json数据使用，可有时候又不行。查了些资料,解释如下:


[javascript] view plain copy
$.ajax({   
        url: ajaxurl,  
        type: "POST",  
        success: function(data){  
            //假设返回的json数据里有status及info2个属性  
            //有时候可以直接ajaxobj.status或者ajaxobj["status"]去访问    
            //但有时候，却要通过eval()或者 $.parsejson();才可以通过ajaxobj.status访问，而且这种情况下，需要是complete而不是success  
            ajaxobj=eval("("+data+")");  
            //或者$.parsejson()  
            //var ajaxobj = $.parsejson(data);  
            if(ajaxobj.status=="0")  
            {  
                alert("请登陆.");  
            }  
            else if(ajaxobj.status=="1")//未绑定微博  
            {  
                alert(ajaxobj.info);  
            }  
            return true;  
        },  
        error:function(ajaxobj)  
        {  
                    if(ajaxobj.responseText!='')  
                    alert(ajaxobj.responseText);  
        }  
    });  
先说明第一种情况: 
    能够直接 data.属性名访问的情况，服务器端代码一定是直接return的一个常量字符串。 
    什么是常量字符串呢，常量字符串就是指直接用“”组成的字符串，没有定义String 变量直接把一串“”print到前台的情况，就可以直接data.属性名访问，而且jquery端只要写success就可以拿到。 

下面是造成要eval并且不能进入success的原因： 
     这种情况是因为服务器端向外print的时候是一个String对象，通常此类问题在我的代码里是因为后台json比较复杂，在组织的时候我用到了StringBuffer，然后最后print的时候print的是StringBuffer对象的toString，所以就相当于print了一个String对象 

     这种情况下jquery的ajax方法就不会进入success方法，只能用complete接收，并且想要解析data里的json数据的话，必须对data.responseText进行eval ()或者 $.parsejson();

    除此两点，还有需要注意的是，如果你使用的是jq1.4，那么他对json的格式有着更严格的要求，所有的key和属性都要用双引号标注起来，虽然key不用双引号原生的js是允许的，但是jq1.4似乎有这个要求。
以上是我个人的想法跟理解,若有不同见解欢迎指教.

 

 

php 接受 json

代码如下:


<?php
 $json_string = $_POST["txt_json"];
 if(ini_get("magic_quotes_gpc")=="1")
 {
  $json_string=stripslashes($json_string);
 }
 $user = json_decode($json_string);
 echo var_dump($user);
?>


在这个文件中，首先得到html文件中POST表单域txt_json的值，放入变量$json_string中，而后判断，如果当前PHP的设定为magic_quotes_gpc=On，即传入的双引号等会被转义，这样json_decode函数无法解析，因此我们要将其反转义化。而后，使用json_decode函数将JSON文本转换为对象，保存在$user变量中，最终用echo var_dump($user);，将该对象dump输出出来

 

 

到此处，已经会了基本的 html 利用 ajax和 form同 php 联络 php和数据库联络，下面准备做一个登陆界面，密码帐号存入数据库，界面利用amuizui的模板。 

　

 

推荐阅读