Jquery或许在前端技术中由于它不太好的性能以及其他原因逐渐被淘汰,但是Jquery在html单页面的应用中依然有着一定的优势,在本章主要简单展示Jquery的两种用于调用接口发起请求的方式。正常情况下,直接采用第一种方式即可,操作性更高,更符合业务需求。
在用Jquery 提供的api方法时,必须先引入Jquery的包,如在html文件中利用script标签引入Jq包
<script src="https://code.jquery.com/jquery-3.5.1.min.js" async></script>
// 其中async是指异步引入,从而不阻塞页面的渲染
js文件中
import 'https://code.jquery.com/jquery-3.5.1.min.js"'
一、$.ajax
$.ajax({
url: 'http://localhost:8000/api/xxx/xxxx', // 请求地址
type: 'post', // 请求方式
data: '', //携带到后端的参数
contentType: 'application/x-www-form-urlencoded', // 传参格式(默认为表单) json为application/json
dataType: 'json', //期望后端返回的数据类型
success: function (res) {
console.log('res', res);
}, // 成功的回调函数 res就是后端响应回来的数据
error: function(err) {
console.log('err', err);
} // 失败的回调函数
})
二 、$.getJSON
$.getJSON('http://localhost:8000/api/xxx/xxxx', function (json) {
console.log('json', json);
});
// jQuery.getJSON(url, data, success(data, status, xhr))
// url 必需。规定将请求发送的哪个 URL。
// data 可选。规定连同请求发送到服务器的数据。
// success(data,status,xhr) 可选。规定当请求成功时运行的函数。
// 额外的参数:
// response - 包含来自请求的结果数据
// status - 包含请求的状态
// xhr - 包含 XMLHttpRequest 对象
// 该函数是简写的 Ajax 函数,等价于:
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});