jQuery框架使用教程 AJAX篇

什么是Ajax

Ajax是用JavaScript编写的一组技术，在无需重新加载整个页面的情况下，将页面的某个部分进行局部更新。这种技术的核心在于通过XMLHttpRequest对象向服务器请求数据，然后操作DOM进行页面的更新。jQuery是一种流行的JavaScript框架，它提供了对Ajax的简化封装，大大地简化了Ajax的操作。

jQuery使用Ajax发送GET请求

使用jQuery发送一个简单的GET请求

发送GET请求的最简单的方式就是调用$.get()方法，例如：

$.get('/api/article', function(data) {
   console.log(data);
});

上面的代码发送一个GET请求到/api/article地址，并且回调函数会在请求的响应数据返回后执行，并且将返回的数据存储在data中。

传递参数

为了额外传递参数，我们可以在$.get()方法中添加一个额外的data参数。该参数需要是一个对象，其中包含所有需要传递的参数。例如：

$.get('/api/article', { 'id': 123 }, function(data) {
   console.log(data);
});

在上面的例子中，我们传递了一个id参数为123的GET请求到/api/article地址。

处理错误

如果请求失败，可以传递一个处理错误的回调函数。

$.get('/api/article', function(data) {
   // 成功回调
}).fail(function(e) {
   // 失败回调
});

jQuery使用Ajax发送POST请求

使用jQuery发送一个简单的POST请求

发送POST请求的最简单的方式就是调用$.post()方法，例如：

$.post('/api/article', { 'id': 123 }, function(data) {
   console.log(data);
});

上面的代码发送一个POST请求到/api/article地址，并且回调函数会在请求的响应数据返回后执行，并且将返回的数据存储在data中。

处理错误

如果请求失败，可以传递一个处理错误的回调函数。

$.post('/api/article', { 'id': 123 }, function(data) {
   // 成功回调
}).fail(function(e) {
   // 失败回调
});

示例说明

示例一

我们准备使用jQuery发送一个GET请求，请求GitHub的公开API，获取用户的信息。代码如下：

$.get('https://api.github.com/users/sunnywalden', function(data) {
   console.log(data);
}).fail(function(e) {
   console.log(e);
});

上面的代码会发送一个GET请求到https://api.github.com/users/sunnywalden地址，获取使用sunnywalden用户名对应的GitHub账号的信息。如果请求成功，控制台会输出一个包含账号信息的JSON对象。如果请求失败，则会输出错误信息。

示例二

我们准备使用jQuery发送一个POST请求，提交一个HTML表单。代码如下：

$('form').submit(function(event) {
   event.preventDefault();
   var form = $(this);
   $.post(form.attr('action'), form.serialize(), function(data) {
       console.log(data);
   }).fail(function(e) {
       console.log(e);
   });
});

上面的代码会捕获所有HTML表单提交事件，并且阻止表单的默认提交行为。然后，使用jQuery的$.post()方法将表单数据序列化，并且发送一个POST请求到表单的action属性指定的URL地址。如果请求成功，控制台会输出请求返回的数据。如果请求失败，则会输出错误信息。