应用接口之:Ajax 的简单方法

在上面的 HTML 文档里有一个 执行 按钮，下面我们可以给这个按钮去绑定一个 API 动作，当点击这个按钮的时候可以去执行请求。

定义动作

API 的动作就是一个名字对应一个请求的地址，动作里可以包含必填或者可选的参数。这些动作的名字可以使用一些短语，比如 save profile ，update post 等等。这些动作可以放在 $.fn.api.settings.api 这里保存，然后我们可以把动作绑定到页面上的某个元素上，比如一个按钮，或者一个表单等等。

下面去定义一个叫 posts 的动作：

绑定动作

上面定义了一个叫 posts 的动作，下面把这个动作绑定到页面上的 执行 这个按钮上：

    $('.ui.button').api({

      action: 'posts'

    });

我们可以使用 jQuery 找到页面上的要绑定 API 动作的元素，这里就是 .ui.button ，然后使用 api 方法，给这个方法一个对象参数，在这个对象里，添加一个 action 属性，这个属性的值就是这个元素要使用的 API 的动作，这里就是前面我们定义的 posts 这个动作。

现在点击 执行 这个按钮的时候，就会去请求在 posts 动作里指定的那个地址。打开浏览器的控制台，我们可以看到一些东西。

在控制台上第一块内容是请求的流程：

Looking up url for action - 查找动作的地址
Querying URL - 查询地址
Sending request - 发送请求
第二块内容，显示 Successful API Response ，成功得到响应，在响应回来的东西里面，你可以找到请求服务端得到的内容，这里就是一些文章内容。

利用服务端响应回来的数据

请求成功以后会执行 onSuccess 这个回调函数，你可以在个函数里去处理服务端响应回来的数据，比如把它们显示在页面上。这里我们可以先简单的把响应回来的文章内容的标题显示在控制台上看一下：

    $('.ui.button').api({

      action: 'posts',

      onSuccess: function (response) {

        response.map(function (post) {

          console.log(post.title);

        });

      }

    });

在元素的 api 这个方法的配置对象里，添加一个 onSuccess 属性，属性的值是一个函数，接受一个参数叫 response，这个 response 就是服务端响应回来的数据，它是一个数组，所以我们可以使用 map 方法去循环的处理一下这个数组，把每个结果里的 title 属性输出到控制台上。

动作里的参数

在定义 API 动作的时候，我们可以在动作里面添加一些参数，比如你可能想要得到某个具体的文章内容，而不是一个文章的列表。这就需要使用文章内容的 ID 作为一个参数，这样服务端会返回某个具体的文章内容。参数有两种，一种是必填的，也就是在请求的时候你必须要指定这个参数的值，另一种是可选参数，请求的时候可以加上参数，也可以不加。

必填参数：{参数名}
可选参数：{/参数名}
区别就是，可选参数的参数名前面要加上一个斜线。下面我们给 posts 这个动作添加一个叫 id 的参数：

    $.fn.api.settings.api = {

      'posts': 'http://web-stack.wordpress.ninghao.local/wp-json/posts/{/id}'

    };

上面我们把 id 这个参数定义成了一个可选的参数。

设置参数的值

在向服务端发出请求的时候，你可以指定 api 动作里的参数的值。有两种方法，一种是使用 data 属性的方法，另一种是使用 JavaScript 去指定参数的值。

使用 data 属性设置参数的值

使用 data 属性的方法，就是你可以在元素的上面添加一个 data 开头的属性，后面加上参数的名字，还有对应的值，比如我要为 id 这个参数设置一个值，使用 data 属性去设置可以这样：

 执行

元素上的 data-id 这个属性的值，就是为 api 动作里的 id 这个参数设置的值，这里就是 119 ，这样服务端返回的结果就会是 id 号是 119 的这个文章内容。因为加了参数以后，返回来的结果就不是一个数组了，所以我们需要改造一下 onSuccess 。

   onSuccess: function(response) {

      if ($.isArray(response)) {

        response.map(function (post) {

          console.log(post.title);

        });

      } else {

        console.log('ID：' + response.ID + ' ' + response.title);

      }

    },

去判断一下服务端响应回来的数据，是不是一个数组，如果是就循环的在控制台上输出结果里的 title 属性的值，如果不是，就直接输出结果的 id 还有 title 属性的值。

使用 JavaScript 设置参数的值

设置参数的值还可以使用 JavaScript 的方法，先去掉在元素上的 data-id 这个属性。然后去改造一下 api 方法里的配置对象：

  $('.ui.button').api({

      action: 'posts',

      urlData: {

        id: 119

      },

      onSuccess: function(response) {

        if ($.isArray(response)) {

          response.map(function (post) {

            console.log(post.title);

          });

        } else {

          console.log('ID：' + response.ID + ' ' + response.title);

        }

      },

    });

上面我们在 api 的配置对象里添加了一个 urlData 属性，这个属性的值是一个对象，在这个对象里，可以设置一下 api 的参数，还有对应的值。