使用 jQuery 进行 ajax 调用

📌 相关文章

📜 使用 jQuery 进行 ajax 调用 - Javascript (1)

📅 最后修改于: 2023-12-03 15:06:48.137000 🧑 作者: Mango

jQuery 是一个非常流行的 JavaScript 库，提供了许多实用的工具来简化 JavaScript 开发。其中，jQuery 的 ajax 功能是我们平时使用最多的一种功能之一，可以帮助我们轻松地实现异步数据交互。

jQuery ajax 的基本语法

jQuery 的 ajax 调用非常简单，具体的语法形式如下：

$.ajax({
  url: 'ajax/test.html', // 请求地址
  type: 'GET', // 请求类型，可以是 GET、POST、PUT、DELETE 等
  data: { key1: 'value1', key2: 'value2' }, // 发送的数据，可以是对象、字符串、数组等格式
  dataType: 'html', // 返回的数据类型，可以是 text、html、json、jsonp、xml 等
  success: function (response) { // 请求成功后的回调函数
    console.log(response);
  },
  error: function (xhr, status, error) { // 请求失败后的回调函数
    console.error(error);
  },
  complete: function () { // 请求完成后的回调函数，无论请求成功或失败都会执行
    console.log('complete');
  }
});

以上代码中，url 表示要请求的地址，type 表示请求类型，data 表示要发送的数据，dataType 表示返回的数据类型，success 表示请求成功后的回调函数，error 表示请求失败后的回调函数，complete 表示请求完成后的回调函数。

jQuery ajax 的常用参数

除了上述基本语法，jQuery ajax 还提供了许多常用的参数，我们可以根据需要选择使用。

async

async 表示异步模式，如果设置为 false，则会变成同步模式，默认值为 true。

$.ajax({
  url: 'ajax/test.html',
  async: false,
  success: function (response) {
    console.log(response);
  }
});

cache

cache 表示是否从缓存中读取数据，默认为 true，如果设置为 false，则会强制从服务器重新加载数据。

$.ajax({
  url: 'ajax/test.html',
  cache: false,
  success: function (response) {
    console.log(response);
  }
});

timeout

timeout 表示超时时间，单位为毫秒，默认为 0，表示不超时。

$.ajax({
  url: 'ajax/test.html',
  timeout: 5000, // 超时时间为 5 秒
  success: function (response) {
    console.log(response);
  },
  error: function (xhr, status, error) {
    console.error(error);
  }
});

beforeSend

beforeSend 表示请求发送前的回调函数，可以在此处添加请求头等信息。

$.ajax({
  url: 'ajax/test.html',
  beforeSend: function (xhr) { // xhr 为 XMLHttpRequest 对象
    xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('token'));
  },
  success: function (response) {
    console.log(response);
  },
  error: function (xhr, status, error) {
    console.error(error);
  }
});

headers

headers 表示要发送的自定义请求头。

$.ajax({
  url: 'ajax/test.html',
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  success: function (response) {
    console.log(response);
  },
  error: function (xhr, status, error) {
    console.error(error);
  }
});

dataFilter

dataFilter 表示对返回数据进行过滤的函数。

$.ajax({
  url: 'ajax/test.html',
  dataType: 'text',
  dataFilter: function (data, dataType) {
    if (dataType === 'json') {
      var obj = JSON.parse(data);
      return obj;
    } else {
      return data;
    }
  },
  success: function (response) {
    console.log(response);
  },
  error: function (xhr, status, error) {
    console.error(error);
  }
});

jQuery ajax 的实战例子

下面是一个使用 jQuery ajax 进行数据获取和展示的简单例子：

<!DOCTYPE html>
<html>
<head>
  <title>使用 jQuery 进行 ajax 调用</title>
</head>
<body>
  <div id="result"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $.ajax({
      url: 'https://api.github.com/users/github',
      success: function (data) {
        var html = '<h1>' + data.login + '</h1>' +
                   '<p>' + data.bio + '</p>' +
                   '<img src="' + data.avatar_url + '">';
        $('#result').html(html);
      },
      error: function (xhr, status, error) {
        console.error(error);
      }
    });
  </script>
</body>
</html>

以上代码中，我们使用了 jQuery 的 ajax 功能来获取 GitHub 上 github 用户的信息，并将信息展示在网页上。

总结

jQuery ajax 是一种非常实用的数据交互方式，可以帮助我们轻松地实现异步请求和响应。除了基本语法外，jQuery ajax 还提供了许多常用参数，可以根据需要选择使用。在实际开发中，我们应该根据具体的业务需求来选择合适的请求方式，并且需要注意安全性和效率问题。