Jquery Ajax请求方法小结(值得收藏)

前言

在前端开发中，我们经常会涉及到数据的异步请求，而jquery中提供了丰富的ajax方法来处理这种请求。本文将对jquery中的ajax请求方法进行总结和介绍，帮助大家掌握相关技能，提高开发效率。

$.ajax()方法

$.ajax()方法是jquery中最常用的ajax方法，它能够处理各种类型的请求方式。下面是$.ajax()方法的完整参数列表，我们来逐一解释每一个参数的含义：

$.ajax({
  url: '', // 请求的url地址
  type: '', // 请求方式（GET/POST/PUT/DELETE等）
  data: {}, // 请求携带的参数（可以是对象、数组、字符串等）
  dataType: '', // 服务器返回数据的类型
  contentType: '', // 发送的数据类型（例如application/json等）
  beforeSend: function() {}, // 请求发送前执行的回调函数
  success: function() {}, // 请求成功后执行的回调函数
  error: function() {}, // 请求失败后执行的回调函数
  complete: function() {} // 请求完成后执行的回调函数（无论成功或失败）
});

url参数

url参数表示要请求的url地址，可以是绝对路径或相对路径。可以是字符串类型、变量、函数等类型。

type参数

type参数表示请求的类型，可以是GET、POST、PUT、DELETE等。默认值是GET请求。

data参数

data参数是请求携带的参数，可以是对象、数组、字符串等类型。可以通过$.param()方法将数据编码成URL格式，也可以将对象序列化成JSON格式。

// data参数为对象
$.ajax({
  url: '',
  type: 'POST',
  data: {
    name: '张三',
    age: 18
  },
  success: function(data) {}
});

// data参数为JSON
var obj = {
  name: '张三',
  age: 18
};
$.ajax({
  url: '',
  type: 'POST',
  data: JSON.stringify(obj),
  contentType: 'application/json',
  success: function(data) {}
});

dataType参数

dataType参数表示服务器返回数据的类型，可以是json、xml、html、text等类型，默认是智能识别。

contentType参数

contentType参数表示发送的数据类型，例如application/json等。默认是使用urlencoded格式。

beforeSend参数

beforeSend参数表示发送请求前执行的回调函数，可以进行一些处理操作，例如添加loading提示。

success参数

success参数表示请求成功后执行的回调函数，在函数中可以对返回的数据进行处理。

error参数

error参数表示请求失败后执行的回调函数，可以进行一些处理操作，例如提示用户请求失败原因。

complete参数

complete参数表示请求完成后执行的回调函数，无论请求成功或失败都会执行。

$.get()方法

$.get()方法是一种简化版的ajax方法，适用于发送GET请求获取数据。

$.get(url, [data], [callback], [dataType]);

其中，前两个参数是必选参数，callback和dataType是可选参数。

例如：

$.get('/api/users', {page: 1}, function(data) {
  console.log(data);
}, 'json');

$.post()方法

$.post()方法与$.get()方法类似，适用于发送POST请求获取数据。

$.post(url, [data], [callback], [dataType]);

例如：

$.post('/api/users', {name: '张三', age: 18}, function(data) {
  console.log(data);
}, 'json');

示例说明

下面是一个完整的例子，使用$.ajax()方法发送POST请求获取数据，并进行相应的提示处理。

HTML代码：

<div class="container">
  <button id="btn">点击获取用户信息</button>
</div>

JS代码：

$(function() {
  $('#btn').on('click', function() {
    $.ajax({
      url: '/api/users',
      type: 'POST',
      data: {name: '张三', age: 18},
      dataType: 'json',
      contentType: 'application/json',
      beforeSend: function() {
        // 发送请求前显示loading提示
        $('.container').append('<div class="loading">正在获取用户信息...</div>');
      },
      success: function(data) {
        // 成功获取数据后显示提示信息
        $('.loading').text('获取用户信息成功');
      },
      error: function() {
        // 获取数据失败后显示错误信息
        $('.loading').text('获取用户信息失败');
      }
    });
  });
});

上述例子中，我们首先绑定了一个点击事件，当用户点击按钮后，会发送POST请求获取用户信息。在请求发送前，会显示一个loading提示，当请求成功后会显示获取数据成功的提示，当请求失败后会显示获取数据失败的提示。

另外一个示例是使用$.get()方法发送GET请求获取数据，并使用模板库(handlebars)来渲染数据。

HTML代码：

<div class="container">
  <ul class="list"></ul>
</div>

<script id="tplUser" type="text/x-handlebars-template">
  {{#each this}}
  <li>{{name}}，{{age}}岁</li>
  {{/each}}
</script>

JS代码：

$(function() {
  $.get('/api/users', function(data) {
    var tpl = $('#tplUser').html();
    var template = Handlebars.compile(tpl);
    var html = template(data);
    $('.list').html(html);
  }, 'json');
});

上述例子中，我们首先定义了一个handlebars模板，然后使用$.get()方法发送GET请求获取数据，在请求成功后，使用handlebars渲染数据并插入到页面中显示。