jQuery Ajax_ZenDei技術網路在線

測試jQuery模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Ajax</title>  <script src="https://code.j ...

測試jQuery模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Ajax</title>
    <!-- 引用線上jQuery文件 -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>

</body>
</html>

load()方法

靜態頁面

index頁面：

<button>按鈕</button>
<div id="xiu"></div>

text頁面：

<p class="p">文章</p>
<p>內容</p>

點擊按鈕在index頁面的div裡面載入text頁面

$('button').click(function(){
    $('#xiu').load('text.html')
})

對載入的HTML篩選

$('button').click(function(){
    $('#xiu').load('text.html .p') //只顯示class為p的文章
})

動態頁面

index頁面：

<button>按鈕</button>
<div id="xiu"></div>

不傳遞data（預設get提交）

js文件

$("button").click(function(){
    $("#xiu").load("php/text.php?url=kang");
})

text.php文件

if($_GET["url"]=="kang"){
    echo "成功";
}else {
    echo "失敗";
}

傳遞data（post提交）

js文件

$("button").click(function(){
    $("#xiu").load("php/text.php",{
        url:'kang'
    })
})

php文件

if($_POST["url"]=="kang"){
    echo "成功";
}else {
    echo "失敗";
}

在Ajax數據載入完畢後，就能執行回調函數，也就是第三個參數回調函數有三個可選參數

$("button").click(function(){
    $("#xiu").load("php/text.php",{},function(resp,stat,xhr){
        alert(resp);//返回PHP數據
        $("#xiu").html(resp + "添加");//修改resp數據
        alert(stat);//成功返回：success，錯誤返回：error
        alert(xhr);//返回對象
    });
})

xhr對象屬性

$get()和$post() .load()方法是局部方法，因為他需要包含元素的JQuery對象作為首碼， $.get()和$.post()是去全局方法，無需指定某個參數對用途而言，.load()適合做靜態文件的非同步獲取，而對於需要傳遞參數到伺服器頁面的，$.get()和$.post()更加合適 $get()方法有四個參數，前面三個參數和.load()一樣，多了一個第四個參數type，即伺服器返回內容的格式（xml,html,script,json,jsonp,text）

<?php
    if($.GET['url']=='xx'){
    　　echo "url=xx列印"
    }
?>

方式一：通過直接在URL問號緊跟傳參（post()不支持方法一）

$("button").click(function(){
    $.get("text.php?url=xx&a=b",function(resp,stat,xhr){
    　　$("#xiu").html(resp)
    })
})

方式二：通過第二個參數data，字元串形式的鍵值對傳參，然後自動轉換為URL問號緊跟傳參

$("button").click(function(){
    $.get("text.php","url=xx"，function(resp,stat,xhr){
    　　$("#xiu").html(resp)
    })
})

方式三：通過第二個參數data，對象形式的鍵值對傳參，然後自動轉換為URL問號緊跟傳參

$("button").click(function(){
    $.get("text.php",{
    url：xx
    }，function(resp,stat,xhr){
    $("#xiu").html(resp)
    })
})

第四個參數

第四個參數type是指定非同步返回的類型，一般情況下type參數是智能判斷，並不需要我們主動設置，如果主動設置，則會強行按照指定類型格式返回

$("button").click(function(){
    $.get("text.php","url=xx"，function(resp,stat,xhr){
  　　  $("#xiu").html(resp)
    },"html") //本身是超文本，如果強行按照xml或者json數據格式返回的話，那就無法獲取數據
})

非同步載入xml

<?xml version="1.0"?>
<root>
    <url>xx</url>
</root>

$("button").click(function(){
    $.get("text.xml"，function(resp,stat,xhr){
    alert($(resp).find("root").find("url").text()) //輸出xx
    },"xml") //如果強行設置html數據格式返回的話，會把源文件輸出
})

非同步載入json

[
    {
    "url" : "xx"
    }
]

$("button").click(function(){
    $.get("text.json"，function(resp,stat,xhr){
    alert(resp[0].url) //輸出xx
    },"json") //如果強行設置html數據格式返回的話，會把源文件輸出
})

$.post()和$.get()的區別

GET請求是通過URL提交的，而POST請求則是HTTP信息實體提交 GET提交有大小限制（2KB），而POST方式不受限制 GET方式會被緩存下來，可能有安全問題，而POST不會緩存 GET方式通過$_GET[]獲取，POST方式通過$_POST[]獲取 $.getScript()和$.getJSON() $.getScript()用於載入js文件

$("button").click(function(){
    $.getScript("text.js")
})

$.getJSON()用於載入json文件

$("button").click(function(){
    $.getJSON("text.json",function(resp,stat,xhr){
    alert(resp[0].url)
    })
})

$.ajax() $.ajax()是所有Ajax方法中最底層的方法，所有的其他方法都是基於$.ajax()方法的封裝，這個方法只有一個參數

最基本的底層Ajax提交

$("button").click(function(){
    $.ajax({
        type : "POST", //預設GET提交
        url : "text.php", //提交的地址
        data : {
            url : xx
        },
        success : function(response,status,xhr){
             $(".xiu").html(response)
        }
    })
})

最基本的表單提交

HTML頁面：

<form>
    <input type="text" name="user"/>
    <input type="text" name="pass"/>
    <input type="radio" name="sex" value="男"/>男
    <input type="button" value="提交"/>
</form>

PHP頁面：

<?php
    echo $_POST["user"]."*".$_POST["pass"]
?>

JavaScript頁面：

$("input[type=button]").click(function(){
    type : "POST",
    url : "text.php",
    data : {
    user : $("input[name=user]").val(),
    pass : $("input[name=pass]").val()
    }
    //data : $("form").serialize(), //表單序列化，可以不用寫上面的data對象
    success : function(resp,stat,xhr){
    $(".xiu").html(resp);
    }
})

.serialize()方法不但可以序列化表單的元素，還可以直接獲取單選框，覆選框和下拉框等內容

$("input[name=sex]").click(function(){
    $(".xiu").html($(this).serialize());
    //serialize()方法進行傳輸的時候進行了編碼，所以需要decodeURIComponent()進行解碼才能正常顯示
    $(".xiu").html(decodeURIComponent($(this).serialize()))
})

.serializeArray()這個方法可以直接把數據整合成鍵值對的JSON對象

$("input[name=sex]").click(function(){
    console.log($(this).serializeArray()); //console.log()可以列印任何數據類型
    var json = $(this).serializeArray();
    $(".xiu").html(json[0].value); //頁面上列印輸出
})

初始化重覆的屬性

$.ajaxSetup({
    type : "POST",
    url : "text.php",
    date : $("form").serialize()
})
$("input[type=button]").click(function(){
    success : function(resp,stat,xhr){
    $(".xiu").html(resp);
    }
})

響應前後載入

$(document).ajaxStart(function(){
    alert("Ajax載入前執行");
}).ajaxStop(function(){
    alert("Ajax載入後執行");
})

全局執行的順序

$(document).ajaxSend(function(){
    alert("發送請求前執行");
}).ajaxComplete(function(){
    alert("請求完成後執行，不管對錯最後執行");
}).ajaxSuccess(function(){
    alert("請求成功後執行");
}).ajaxError(funtion(){
    alert("請求失敗後執行");
})

有時程式對於複雜的序列化解析能力有限，可以使用$.param()方法將對象轉換為字元串鍵值對格式可以更加穩定准確的傳遞表單內容

$("input[type=button]").click(function(){
    type : "POST",
    url : "text.php",
    data : $param({
    user : $("input[name=user]").val(),
    pass : $("input[name=pass]").val()
    }),
    success : function(resp,stat,xhr){
    $(".xiu").html(resp);
    },
    error : function(xhr,errorText,errorType){
    alert("自定義錯誤")
    alert(errorText+"*"+errorType)
    alert(xhr.status+"*"+xhr.statusText)
    },
    timeout : 1000, //設置響應時間後停止
    global : false, //取消全局事件
})

JSON和JSONP

在同域的情況下，$.ajax()方法只要設置dataType屬性即可載入JSON文件

<?php
    $xiu = array('a'=>1,'b'=>2,'c'=>3)
    $kang = json_encode($xiu) //將數組轉換為json格式
    echo $kang
?>

$.ajax({
    url : "text.php",
    dataType : "json",
    success : function(ersponse,status,xhr){
    alert(ersponse.a); //輸出1
    }
})

在非同域的情況下，可以使用JSONP(非官方的協議) 它允許伺服器端集成返回至客戶端通過JavaScript callback的形式實現跨越訪問（這僅僅是JSONP簡單的實現形式） <?php $xiu = array('a'=>1,'b'=>2,'c'=>3) $kang = json_encode($xiu) //將數組轉換為json格式 $anni = $_POST("callback") echo $anni."($kang)" ?>

$_getJSON()方法跨域獲取JSON

$_getJSON("http://www.xiu.com/text.php?callback=?",function(response,status,xhr){
  $(".xiu").html(response.a)  
})

使用$_ajax()方法跨域獲取JSON的兩種方式

$.ajax({
    url : "http://www.xiu.com/text.php?callback=?",
    dataType : "json",
    success : function(response,status,xhr){
    $(".xiu").html(response.a)
    }
})

$.ajax({
    url : "http://www.xiu.com/text.php",
    dataType : "jsonp",
    success : function(response,status,xhr){
    $(".xiu").html(response.a)
    }
})

jqXHR對象

獲取jqXHR對象

var jqXHR = $.ajax({}) 如果使用jqXHR對象的話，建議用.dome(),.always()和.fail()代替.success(),.complete()和.error() 列如成功後回調函數

jqXHR.dome(function(response,status,xhr){
    $(".xiu").html(response)
})

使用jqXHR的連綴方式比$.ajax()的屬性方式有三大優點 1.可連綴操作，可讀性大大提高

jqXHR.dome().dome() //同時執行多個成功後的回調函數

2.可以多次執行同一個回調函數 3.為多個操作指定回調函數

var jqXHR = $.ajax("text.php")
var jqXHR2 = $.ajax("text2.php")
$.when(jqXHR,jqXHR).done(function(x,y){
    alert(x[0])
    alert(y[0])
})