jQuery Ajax【上】

学习要点：

• 1.Ajax 概述
• 2.load()方法
• 3.$.get()和$.post()
• 4.$.getScript()和$.getJSON()
• 5.$.ajax()方法
• 6.表单序列化

一、Ajax概述
Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）
可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。
Ajax最大的特点在于异步请求
JQ对ajax进行了大量的封装，我们压根不用考虑浏览器的兼容
JQ对ajax进行了三层封装：
最底层：$.ajax()
中间层：$.post()、$.get()和$.load()
PS ：.load()适合做静态文件的异步获取, $.post()和$.get()适合向服务器传递参数
最顶层：$.getScript()和$.getJSON()

二、$.load()
用途 适合做静态文件的异步获取，接受4个参数
url String 请求页面的URL
data Object 发送数据, 当传值的时候为POST请求，不传值data时，默认为get请求
callback Function 回调函数
其中callback回调函数又包含4个参数
responseText （请求返回）
textStatus（请求状态）
XMLHttpRequest（XMLHttpRequest 对象）
当按钮点击时，我们发送ajax请求到ajax.php页面
请求类型为POST，请求参数为url

<input type="button" value="异步获取数据" />
<div id="box"></div>

<?php
    if ($_POST['url'] == 'lamport') {
        echo 'lamport';
    } else {
        echo 'lamp';
    }
?>

$("input").click(function () {
    $("#box").load("ajax.php", {
        "url" : "lamport"
    }, function (response, status, xhr) {
        $(this).html("返回值：" + xhr.responseText + ", 状态码：" + xhr.status + ", 状态值：" + xhr.statusText);
    });
});

三、$.get()和$.post()
用途 适合向服务器发送参数
他们除了可以传递url、data和callback,还可以传递第四个参数
type，即服务器返回的内容格式：包括 xml、html、script、json、jsonp 和 text
除了url必选，其他可选
下面是一个案例
异步GET请求，返回XML

// ajax.xml
<root>
    <name>张三</name>
    <age>23</age>
</root>

$("input").click(function () {
    $.get("ajax.xml", function (response, status, xhr) {
        $("#box").html($(response).find("root").find("name").text());
    });
});

四．$.getScript()和$.getJSON()
$.getScript()，用于加载特定的 JS 文件；
$.getJSON()，用于专门加载 JSON 文件。
点击鼠标加载js文件

// ajax.js
alert("加载我");

$("input").click(function () {
    $.getScript("ajax.js");
});

点击鼠标加载json文件

// ajax.json
{"name" : "zhang", "age" : 23}

$("input").click(function () {
    $.getJSON("ajax.json", function (response, status, xhr) {
        $("#box").html($(response)[0].name);
    });
});

五、$.ajax()
最底层的方法，只接受一个对象参数

$("input").click(function () {
    $.ajax({
        type : 'POST',
        url : "ajax.php",
        data : {
            "url" : "lamport"
        },
        success : function (response, status, xhr) {
            $("#box").html(response);
        }
    });
});

六．表单序列化
以下的js要用的HTML代码

<form>
    姓名： <input type="text" name="username"/></br>
    邮箱： <input type="text" name="email"/></br>
    性别： <input type="radio" name="sex" value="男" checked="true"/>男<input type="radio" name="sex" value="女"/>女</br>
    爱好： <input type="checkbox" name="hobby[]" value="篮球"/>篮球
            <input type="checkbox" name="hobby[]" value="排球"/>排球
            <input type="checkbox" name="hobby[]" value="足球"/>足球</br>
    问题： <select name="ans">
                <option value="what">你会什么？</option>
                <option value="how">你想怎么样？</option>
                <option value="why">你为什么这样？</option>
            </select></br>
    <input type="button" name="sub" value="提交"/>
</form>

先看看常规的表单提交

// ajax.php
<?php
    echo $_POST['user'] . "-" . $_POST["email"];
?>


$("form input[type=button]").click(function () {
    $.ajax({
        type : "POST",
        url : "ajax.php",
        data : {
            user : $("form input[name=username]").val(),
            email : $("form input[name=email]").val()
        },
        success : function (response, status, xhr) {
            alert(response);
        }
    });
});

而使用.serialize()序列化，就是自动的提交表单中填的数据

$("form input[type=button]").click(function () {
    $.ajax({
        type : "POST",
        url : "ajax.php",
        data : $("form").serialize(),
        success : function (response, status, xhr) {
            alert(response);
        }
    });
});

有时我们会多次提交表单，而且表单的某些字段是重复的，
为了避免这样，我们可以使用$.setAjax()方法来初始化重复的字段

$("form input[type=button]").click(function () {
    $.setAjax({
        type : "POST",
        url : "ajax.php",
        data : $("form").serialize()
    });
    $.ajax({
        success : function (response, status, xhr) {
            alert(response);
        }
    });
});

除了.serialize()序列化，还可以用.serializeArray()来返回一个JSON对象

$("form input[type=button]").click(function () {
    var json = $("form").serializeArray();
    for (var j in json) {
        console.log(json[j].value);
    }
});

同时我们也可以向data传递字符串，因为这样会更安全，起码比对象安全
我们可以使用.param()方法将对象转换为字符串，然后再传递

$("form input[type=button]").click(function () {
    var json = $("form").serializeArray();
    for (var j in json) {
        console.log($.param(json[j]));
    }
});