用jQuery實現Ajax

時間 2019-11-18

標籤 jquery 實現 ajax 欄目 JQuery 简体版

原文原文鏈接

前置知識：ajax原理，json字符串進行信息傳遞。php

Ajax主要的功能是實現了瀏覽器端異步訪問服務器：經過瀏覽器的XMLHttpRequest對象發出小部分數據，與服務端進行交互，

服務端返回小部分數據，而後更新客戶端的部分頁面。html

json是Ajax發送小部分數據的一種輕量級數據格式，能夠簡單易懂的給服務器或者瀏覽器交互數據，包括json對象，json數組對象。

1、jquery.ajax()

jquery 庫中已經封裝了ajax請求的方法。jquery

jquery.ajax([settings])。發請求而且能得知成功仍是失敗。ajax

type:類型，"POST"或者"GET"，默認是"GET"。
url:發送請求的地址。
data：是一個對象，連同請求發送到服務器的數據
dataType：預期服務器返回的數據類型。若是不指定，jQuery將自動根據HTTP包含的MIME信息來智能判斷，通常咱們採用json個數，能夠設置爲"json"。
success:是一個方法，請求成功後的回調函數。傳入返回後的數據，以及包含成功代碼的字符串。
error:是一個方法、請求失敗時調用此函數。傳入XMLHttpRequest對象。

jquery初始化。json

$(document).ready(function(){api

});數組

error方法中第一個參數是jqXHR，能夠經過jqXHR獲取status。瀏覽器

2、jquery GET請求

$(document).ready(function(){
    $("#searchBtn").click(function(){
        $.ajax({
            type:"GET",
            url:" https://api.passport.xxx.com/checkNickname?username="+mylogin.username+"&token="+mylogin.token+"&nickname="+nickname+"&format=jsonp&cb=?",
            dataType:"json",
            success:function(data){
                if(data.errorCode==0){
                                         $("#nickname").val(mylogin.nickname);                             
                                 }else{
                                         $("#nickname").val("用戶");                         
                                 }
            },
            error:function(jqXHR){
                console.log("Error: "+jqXHR.status);
            }
        });
    });
});

3、POST請求

function dologin(qrid,username,token){
    $.ajax({
        url:"http://api.passport.pptv.com/v3/login/qrcode.do",
        type:"post",
        dataType:"jsonp",
        data:{from:"clt",qrid:qrid,username:username,token:token},
        success:function(data){
             try {
                    var p = external.GetObject('@xxx.com/passport;1');
                    p.On3rdLogin2(0,0,data,true);
                } catch (e) {
                    return false;
                }
                setTimeout(function () {
                    try {
                        var wb = external.Get('Signin2Window');
                        wb.OnClose();
                    } catch (e) {
                    }
                }, 200);
        }
    });
}

POST請求，不須要去拼url字符串了，只須要指定data，ajax在傳遞的時候就會自動把它拼成url。服務器

Content-Type是ajax爲咱們自動加上去的。異步

Form Data在設置的時候，是用JSON對象的一個方式設置的。

但實際上在傳遞的時候，jquery已經爲咱們拼成了url的格式，並且進行了一些轉碼。

POST代碼demo：

$.ajax({
    type:"POST",
    url:"service.php",
    dataType:"json",
    data{
        name:$("#staffName").val(),
        number:$("#staffNumber").val(),
        sex:$("#staffSex").val(),
        job:$("#staffJob").val(),
    },
    success:function(data){
        if(data.success){
            $("#createResult").html(data.msg);
        }else{
            $("#createResult").html("出現錯誤"+data.msg);
        }
    },
    error:function(jqXHR){
        console.log("發生錯誤："+jqXHR.status);
    }
});