Jquery提供调用接口的两种方式

最新推荐文章于 2024-07-28 17:31:47 发布

小粗腿Cc

最新推荐文章于 2024-07-28 17:31:47 发布

阅读量6.1k

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_45249263/article/details/127589578

版权

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
});