$.get、$.post 和 $.ajax
请求方式
客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别是 get 和 post 请求。
get 请求
get 请求通常用于获取服务器的资源(拿数据),例如根据 URL 地址,从服务器获取 HTML 文件、CSS 文件、数据资源等。
post 请求
post 请求通常用于向服务器提交数据(发送数据),例如登录时向服务器提交的登录信息、注册时向服务器提交的注册信息等。
$.get()
jQuery 中 $.get() 函数的功能单一,专门用来发起 get 请求。语法:$.get( url, [data], [callback] )。
参数
1、url:要请求的资源地址,是必选的。
2、data:请求资源带的参数,是可选的。
3、callback:请求成功时的回调函数,是可选的。
发起不带参数的请求
$(() => {
$('#btn').on('click', () => {
$.get('http://www.liulongbin.top:3006/api/getbooks', (res) => {
console.log(res);
})
})
})
发起带参数的请求
$(() => { $('#btn').on('click', () => { // 指定 URL 参数 回调函数 $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, (res) => { console.log(res); }) }) })
$.post()
jQuery 中 $.post() 的功能单一,专门用来发起 post 请求,从而向服务器提交数据。
语法:$.post(url, [data], [callback])。
参数
1、url:要提交数据的地址,必选项。
2、data:要提交的数据,可选项。
3、callback:数据提交成功时的回调函数,可选项。
$.post()向服务器提交数据
$('#post').on('click', () => {
$.post('http://www.liulongbin.top:3006/api/addbook', {
bookname: '东游记',
author: '南游记',
publisher: '北游记'
}, (res) => {
console.log(res);
})
})
$.ajax()
相比于 $.get() 和 $.post() 函数,jQuery 中提供的 $.ajax() 函数,是一个功能比较综合的函数,它允许我们对 Ajax 请求进行更详细的配置。
基本语法:
$.ajax({ type:' ', url:' ', data:' ', success:function( res ){ } })
type:请求的方式,如 get、post。
url:请求的 URL 地址。
data:这次请求要携带的数据。
success:请求成功的回调函数。
发送 get 请求$(() => { $('#btn').on('click', () => { $.ajax({ // 请求方式 type: 'GET', // 请求地址 url: 'http://www.liulongbin.top:3006/api/getbooks', // 请求参数 data: { id: 2 }, // 请求成功后的回调函数 success(res) { console.log(res); } }) }) })
发送 post 请求
$('#btn').on('click', () => {
$.ajax({
type: 'POST',
url: "http://www.liulongbin.top:3006/api/addbook",
data: {
bookname: "东游记",
author: "南游记",
publisher: "北游记"
},
success(res) {
console.log(res);
}
})
})

浙公网安备 33010602011771号