$.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); } }) })
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现