13. jquery ajax json 學習

時間 2019-11-18

原文原文鏈接

1. 新浪博客上的一個例子，原做者 http://blog.sina.com.cn/s/blog_6ce9e8870101de3t.htmljavascript

index.htmlphp

<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>

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

代碼解釋：java

login.php ：jquery

a. json_encode ：http://php.net/manual/en/function.json-encode.php 不復制過來了，幾個例子都很好。ajax

index.html：數據庫

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

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"}這種方式寫的話就不須要進行轉義*/

另外一篇

/**
* 訂單取消
* @return {Boolean} 處理是否成功
*/
function orderCancel(orderId, commant){
var flag = false;
$.ajax({
type: "POST",
url: "../order/orderCancel.action", //orderModifyStatus
data: {"orderId":orderId,"commant":commant},
dataType:"json",
async:false,
cache:false,
success: function(data){
var member = eval("("+data+")"); //包數據解析爲json 格式
if(member.success=="true"){
flag = true;
}else if(member.success=="false") {
alert(member.info);
}
},
error: function(json){
alert("訂單取消異常，請刷新後重試...");
}
});
hidediv();
return flag;
}

c.$.ajax() -> success :async

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的模板。