博客

jQuery ajax()方法

  • Post category:jquery

当我们需要通过JavaScript来与服务器进行数据交互时，其实就是需要使用到 AJAX 技术，而 jQuery 提供的 ajax() 方法则是一种简便的实现方式。本文将详细讲解 jQuery ajax() 方法的基本用法以及常用参数。

基本用法

ajax() 方法用于向服务器发送请求，并接收服务器响应。具体使用方式如下：

$.ajax({
    url: "server.php", //请求地址
    type: "POST", //请求方法
    data: { name: "tom", age: 18 }, //请求数据
    success: function(result) {
        //请求成功后的处理函数
        console.log(result);
    },
    error: function(xhr, status, errorThrown) {
        //请求失败后的处理函数
        console.log(status + "：" + errorThrown );
    }
});

以上代码中，ajax() 方法接收一个对象作为参数，其中包含了一系列参数设置。其中，url 即为请求地址，type 为请求方式（GET 或 POST），data 为请求数据，success 和 error 分别为请求成功和失败后的回调函数。

常用参数

除了上述的基本用法外，我们还可以针对具体需求使用一些常用参数来进行高级设置。

dataType

dataType 用于指定服务器返回数据的格式。常用值包括：xml、json、script、text 等。例如：

$.ajax({
    url: "server.php",
    dataType: "json",
    success: function(data) {
        //请求成功后的处理函数
        console.log(data.id + "：" + data.name);
    }
});

以上代码中，dataType 被设置为 “json”，表示预计服务器响应的是一个 JSON 格式的数据。请求成功后，将执行 success 回调函数，并将服务器返回数据解析为对象形式进行处理。

timeout

timeout 用于指定请求超时时间，单位为毫秒。例如：

$.ajax({
    url: "server.php",
    timeout: 3000,
    success: function(data) {
        //请求成功后的处理函数
        console.log(data);
    },
    error: function(xhr, status, errorThrown) {
        //请求失败后的处理函数
        console.log(status + "：" + errorThrown );
    }
});

以上代码中，timeout 被设置为 3000，表示如果请求超过 3 秒还未收到服务器响应，则认为请求超时，将执行 error 回调函数。

示例说明

下面给出两个具体的示例进行说明。

示例一：获取天气数据

$.ajax({
    url: "https://tianqiapi.com/api",
    data: {
        version: "v6",
        cityid: "101020100",
        appid: "66821543",
        appsecret: "G9l0Tl6j"
    },
    dataType: "jsonp",
    success: function(result) {
        console.log(result.city + "：" + result.wea);
    },
    error: function(xhr, status, errorThrown) {
        console.log(status + "：" + errorThrown );
    }
});

以上代码中，我们向天气 API 发送 GET 请求，请求参数包括城市 ID、appid 和 appsecret。由于天气 API 返回的数据格式为 JSONP，所以我们需要将 dataType 设置为 “jsonp”。请求成功后，将输出当前城市和天气状况。

示例二：上传文件

<input type="file" id="file">
<button id="btn">上传文件</button>
<script>
    $("#btn").click(function() {
        var file = $("#file")[0].files[0];
        var formdata = new FormData();
        formdata.append("file", file);
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function(result) {
                console.log(result);
            },
            error: function(xhr, status, errorThrown) {
                console.log(status + "：" + errorThrown );
            }
        });
    });
</script>

以上代码中，我们首先通过 input[type=file] 元素获取用户选择的文件，并将其存储于 formdata 中。然后，我们向 upload.php 发送一个 POST 请求，请求数据即为 formdata。由于我们需要上传文件，因此需要将 processData 和 contentType 设置为 false，以确保数据以正确的格式发送到服务器。请求成功后，将输出服务器返回结果。

Tags: