jQuery的Ajax

浏览器中提供的XMLHttpRequest 用法比较复杂，jQuery对XMLHttpRequest进行封装，提供了一些列Ajax相关的函数，降低了Ajax的使用难度

jQuery中发起Ajax请求常用的三个方法：

  • $.get()
  • $.post()
  • $.ajax()

一. $.get()

专门用来发起get请求，将服务器上的资源请求到客户端进行使用

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

url   参数类型 string  必填  要请求的资源地址
data  参数类型 object  不是必填 请求资源要携带的参数
callback  参数类型 function  不是必填 请求成功的回调函数

不带参数的请求

$('#btn').on('click', function () {
      // $.get 发起不带参数的请求
      $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
        // res就是服务器响应回来的数据
        console.log(res)
      })
    })

带参数的请求

$('#btn1').on('click', function () {
      // $.get 发起带参数的请求

      $.get(
        'http://www.liulongbin.top:3006/api/getbooks',
        { id: 1, bookname: '西游记' },
        function (res) {
          console.log(res)
        }
      )
    })

二. $.post()

专门用来发起post请求，向服务器提交数据

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

url   参数类型 string  必填  提交数据的地址
data  参数类型 object  不是必填 要提交的数据
callback  参数类型 function  不是必填 数据提交成功的回调函数

    <button id="btn1">发起post请求</button>
    <script>
        $('#btn1').on('click',function(){
            $.post('http://www.liulongbin.top:3006/api/addbook',
            {bookname:'wmd自传',author:'wmd',publisher:'wmd皇家出版社'},
            function(res){
                console.log(res);
            })
        })
    </script>

三. $.ajax()

是一个功能比较综合的函数，允许我们对ajax请求进行更详细的配置

$.ajax({
    type:"",  //请求的方式   例如 GET或POST
    url:"",   // 请求的url地址
    data:{},   //  请求要携带的数据
    success:function(res){}   //请求成功之后的回调函数
})

1. $.ajax()发起get请求

$("#btn1").on('click', function () {
                // 发起get请求
                $.ajax({
                    type: 'GET',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    data: { id: 1 },
                    success: function (res) {
                        console.log(res);
                    }
                })
            })

2. $.ajax()发起post请求

 $("#btn2").on('click',function(){
                // 发起post请求
                $.ajax({
                    type: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: { bookname: 'wmd自传', author: 'wmd', publisher: 'wmd王家出版社' },
                    success: function (res) {
                        console.log(res);
                    }
                })
            })

四. 接口

使用Ajax请求数据时，请求的url地址，就叫做 数据接口(简称接口)，每个接口必须有请求方式

http://www.liulongbin.top:3006/api/addbook  添加图书接口(post请求)
http://www.liulongbin.top:3006/api/getbooks 获取图书列表接口(get请求)

postman

为了验证接口能否被正常访问，使用接口测试工具，来对数据接口进行检测

好处：接口测试工具能让我们在不写代码的情况下，对接口进行调用和测试

下载

https://www.postman.com/downloads/

接口文档

接口文档可以包含很多信息，也可以按需进行精简，但是一个合格的接口文档，应该包含以下6个内容，为接口的调用提供依据

  • 接口名称 用来标识各个接口的简单说明 如登录接口
  • 接口url 接口的调用地址
  • 调用方式 接口的调用方式 如GET 或POST
  • 参数格式 接口需要传递的参数 每个参数必须包含 参数名称 参数类型 是否必选 参数说明‘
  • 响应格式 接口的返回值的详细描述 ，包含数据名称 数据类型 说明
  • 返回示例 通过对象的形式，列举服务器返回数据的结构
版权声明：本文为wmdaixuexi原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wmdaixuexi/p/16685114.html