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 不是必填 数据提交成功的回调函数
$(function () {
$('#btnPost').on('click', function () {
$.post(
'http://www.liulongbin.top:3006/api/addbook',
{ bookname: 'js编程语法', author: 'hello', publisher: '天津' },
function (res) {
console.log(res)
}
)
})
})
$.ajax()
是一个功能比较综合的函数,允许我们对ajax请求进行更详细的配置
$.ajax({
type:"", //请求的方式 例如 GET或POST
url:"", // 请求的url地址
data:{}, // 请求要携带的数据
success:function(res){} //请求成功之后的回调函数
})
$.ajax()发起get请求
$.ajax({
type: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
data: { id: 1 },
success: function (res) {
console.log(res)
},
})
$.ajax()发起post请求
$(function () {
$('#btn').on('click', function () {
var obj = {
bookname: 'ja编程',
author: 'java',
publisher: '上海图书出版社',
}
$.ajax({
type: 'POST',
url: 'http://www.liulongbin.top:3006/api/addbook',
data: obj,
// success: function (res) {
// console.log(res)
// },
// 对象中的方法可以简写为下面
success(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
- 参数格式 接口需要传递的参数 每个参数必须包含 参数名称 参数类型 是否必选 参数说明‘
- 响应格式 接口的返回值的详细描述 ,包含数据名称 数据类型 说明
- 返回示例 通过对象的形式,列举服务器返回数据的结构