jQuery中的Ajax
jQuery中的Ajax
1.了解jQuery中的Ajax
浏览器中提供了 XMLHttpRequest用法比较复杂,所以jQuery对XMLHttpRequestv进行了封装,提供了一系列Ajax相关的函数,极大降低了Ajax的使用难度。
jQuery中发起Ajax请求最常用的三种方法如下:
$.get() 向服务器获取数据
$.post() 向服务器发送请求
$.ajax()既可以获取也可以发送数据
2.$.get()函数的语法
jQuery中$.get()函数的功能单一,专门用来发起get请求,从而将服务器上的资源请求到客户端来进行使用。
(1)$.get()函数的语法如下:
$.get(ur1,[data],[callback])
其中,三个参数各自代表 的含义如下:
(2)$.get()发起不带参数的请求
使用$.get()函数发起不带参数的请求时,直接提供请求的URL地址和请求成功后的回调函数即可,实例代码如下:
<body>
<button id="btnGET">发起不带参数的请求</button> </body>
//引入jquery <script src="/js/jquery/jquery.min.js"></script> <script> $(function () { $("#btnGET").on("click", function () { $.get("http://www.liulongbin.top:3006/api/getbooks", function (res) { console.log(res); //这里表示res是服务器返回的数据 }); }); }); </script>
(3)$.get()发起带参数的请求
使用$.get()函数发起请求时,示例代码如下:
<body> <button id="btnGET">发起单参数的GET请求</button> </body> <script src="/js/jquery/jquery.min.js"></script> <script> $(function () { $("#btnGET").on("click", function () { $.get( "http://www.liulongbin.top:3006/api/getbooks", { id: 1 }, function (res) { console.log(res); } ); }); }); </script>
3.$.post( )函数的语法
jQuery中$.post( ) 函数的功能单一,专用用来发起post请求,从而向服务器提交数据。
(1)$.post( )函数的语法如下:
$.post(url,[data],[callback])
其中,三个参数各自代表的含义如下:
(2)使用POST提交数据
<body> <button id="btnPOST">发送POST请求</button> </body> <script src="/js/jquery/jquery.min.js"></script> <script> $(function () { $("#btnPOST").on("click", function () { $.post( "http://www.liulongbin.top:3006/api/addbook", { bookname: "水浒传", author: "施耐庵", publisher: "天津图书出版社", }, function (res) { console.log(res); } ); }); }); </script>
$.ajax( ) 函数语法
相比于$.get( ) 和$.post( ) 函数,jQuery 中提供的$.ajax( )函数,是一个功能比较综合的函数,它允许我们对Ajax请求进行更详细的配置。
(1)$.ajax的语法格如下:
$.ajax({
type:' ',//请求的方式,例如 GET或POST
url:' ',//请求的 URL 地址
data:' ',//这次请求要携带的数据
success:function(res) { }//请求成功之后的回调函数
})
(2)使用$.ajax()发起GET请求
使用$.ajax()发起GET请求时,只需要将type属性的值设置为'GET'即可:
<body> <button id="btnGET">发起GET请求</button> </body> <script src="/js/jquery/jquery.min.js"></script> <script> $(function () { $("#btnGET").on("click", function () { $.ajax({ type: "GET", url: "http://www.liulongbin.top:3006/api/getbooks", // 如果不写参数就没必要写data id data: { id: 1, }, success: function (res) { console.log(res); }, }); }); }); </script>
(3)使用$.ajax()发起POST请求
使用$.ajax()发起GET请求时,只需要将type属性的值设置为'GET'即可:
<body> <button id="btnPOST">发起POST请求</button> </body> <script src="/js/jquery/jquery.min.js"></script> <script> $(function () { [ $("#btnPOST").on("click", function () { $.ajax({ type: "POST", url: "http://www.liulongbin.top:3006/api/addbook", data: { bookname: "史记", author: "司马迁", publisher: "上海图书出版社", }, success: function (res) { console.log(res); }, }); }), ]; }); </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析