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>
