jQuery Ajax全解析

什么是jQuery Ajax

jQuery Ajax 是 jQuery 提供的一种方便的异步请求和响应框架。通过 Ajax 可以无需刷新整个页面，只发送局部请求，更加快速、高效地更新页面内容。

jQuery Ajax 如何使用

发送 Ajax 请求的基本结构

$.ajax({
    url: "example.com",  // 请求的地址
    type: "GET",  // 请求类型
    data: {key: value},  // 请求参数
    dataType: "html",  // 服务器返回数据类型
    success: function(data, status, xhr){   // 请求成功时的回调函数
        // 对返回的数据进行处理
    },
    error: function(xhr, status, error){   // 请求失败时的回调函数
        // 输出错误信息
    },
    complete: function(xhr, status){   // 请求完成时的回调函数
        // 输出请求完成信息
    }
});

常见的 Ajax 请求类型

GET 请求

GET 请求用于从服务器获取数据，并在响应数据中保存结果。 GET 请求通过查询字符串传递参数，即在 URL 中通过 ?key=value 的方式传递。示例代码：

$.ajax({
    url: "api.php?user_id=1",
    type: "GET",
    dataType: "json",
    success: function(data, status, xhr){
        // 获得返回的数据并进行处理
    },
    error: function(xhr, status, error){
        // 该请求失败时的处理
    }
});

POST 请求

POST 请求用于向服务器提交数据，通常用于向服务器提交用户表单。POST 请求将数据放在请求体中发送，服务器需要通过解析请求体来获取提交的数据。示例代码：

$.ajax({
    url: "api.php",
    type: "POST",
    dataType: "json",
    data: {
        user_id: "1",
        user_name: "Jack"
    },
    success: function(data, status, xhr){
        // 获得返回的数据并进行处理
    },
    error: function(xhr, status, error){
        // 该请求失败时的处理
    }
});

Ajax 数据类型

jQuery Ajax 提供了多种响应数据类型，可以通过 dataType 参数进行设置。

html

html 类型的响应数据是 HTML 格式的文本，直接用于更新页面的 HTML 代码。用法如下：

$.ajax({
    url: "api.php",
    type: "POST",
    dataType: "html",
    success: function(data, status, xhr){
        // 将 HTML 代码更新到页面中
        $("#target").html(data);
    },
    error: function(xhr, status, error){
        // 该请求失败时的处理
    }
});

json

json 类型的响应数据是 JSON 格式的文本，需要通过 JSON.parse 来解析。用法如下：

$.ajax({
    url: "api.php",
    type: "POST",
    dataType: "json",
    success: function(data, status, xhr){
        // 解析 JSON 数据并进行处理
        var user_id = data.user_id;
        var user_name = data.user_name;
    },
    error: function(xhr, status, error){
        // 该请求失败时的处理
    }
});

xml

xml 类型的响应数据是 XML 格式的文本，需要通过 $.parseXML 和 jQuery 提供的操作 XML 的方法进行处理。用法如下：

$.ajax({
    url: "api.php",
    type: "POST",
    dataType: "xml",
    success: function(data, status, xhr){
        // 解析 XML 数据并进行处理
        var user_id = $(data).find("user_id").text();
        var user_name = $(data).find("user_name").text();
    },
    error: function(xhr, status, error){
        // 该请求失败时的处理
    }
});

示例代码

获取天气信息

$.ajax({
    url: "https://api.jisuapi.com/weather/query",
    type: "GET",
    dataType: "json",
    data: {
        appkey: "your appkey here",
        city: "成都"
    },
    success: function(data, status, xhr){
        var weather = data.result;
        var forecast = weather.daily[0];
        var html = "<h4>" + weather.city + " " + forecast.week + "</h3>";
        html += "<p>天气：" + forecast.day.weather + " " + forecast.night.weather + "</p>";
        html += "<p>温度：" + forecast.day.temp + "℃ ~ " 
               + forecast.night.temp + "℃</p>";
        html += "<p>风向：" + forecast.day.winddirect + "</p>";
        html += "<p>风力：" + forecast.day.windpower + "</p>";
        $("#weather").html(html);
    },
    error: function(xhr, status, error){
        $("#weather").html("查询天气失败！");
    }
});

提交表单数据

$("#submitBtn").click(function(){
    $.ajax({
        url: "https://api.jisuapi.com/news/publish",
        type: "POST",
        dataType: "json",
        data: {
            appkey: "your appkey here",
            title: $("#title").val(),
            content: $("#content").val()
        },
        success: function(data, status, xhr){
            alert("提交成功！");
        },
        error: function(xhr, status, error){
            alert("提交失败！");
        }
    });
});

以上就是 jQuery Ajax 的完整攻略，包括了发送 Ajax 请求的基本结构、常见请求类型、响应数据类型以及示例代码。