首页 前端知识 Jquery提供调用接口的两种方式

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

2024-06-18 00:06:01 前端知识 前端哥 197 852 我要收藏

        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
});
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12550.html
标签
评论
发布的文章

jQuery基本使用

2024-06-24 02:06:16

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!