(笔记,学的是黑马Ajax的教程day01)
目录
(一)、$.get()函数
(1.1)使用$.get()发起 不带参数 的请求
(1.2)使用$.get()发起 带参数 的请求
(二)、$.post()函数
post()语法
(2.1)$.post()向服务器提交数据
(三)、$.ajax() 函数
$.ajax()函数的基本语法
(3.1)使用$.ajax()发起get请求
(3.2)使用$.ajax()发起post请求
浏览器中提供的 XMLHttpRequest用法比较复杂 所以jQuery 对 XMLHttpRequest 进行了封装,提供了一系列的 Ajax相关的函数,极大的降低了Ajax的使用难度
jQuery中发起Ajax请求最常用的三个方法如下↓
$.get()
$.post()
$.ajax()
jQuery中的 $.get() 函数的功能单一,用来发起get(获取)请求,从而将服务器上的资源请求到客户端上来进行使用(从服务器获取资源)
语法:
$.get( url, [data] , [callback] )
中括号[] 代表的是可选参数,只有参数url是必选的
参数名 参数类型 是否必选 说明 url string 是 要请求的 资源地址 data object 否 请求资源期间要 携带的参数(发送到服务器) callback function 否 请求成功时的 回调函数
使用 $.get() 函数发起不带参数的请求时,直接提供 请求的URL地址 和 请求成功之后的回调函数 即可,示例代码如下
$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
console.log(res) // 这里的 res 是服务器返回的数据
})
举例
使用 $.get() 函数发起带参数的请求时,示例代码如下
$.get('http://www.liulongbin.top:3006/api/getbooks', {id:1},function(res) {
console.log(res) // 这里的 res 是服务器返回的数据
})
第一个参数是:请求的URL地址
第二个参数是:参数对象{},需要传什么样的参数,以一个对象的形式来书写
第三个参数是:成功之后的回调函数
举例
jQuery中 $.post()函数的功能单一,专门用来发起 post请求,从而向服务器提交数据
post()语法
$.post ( url , [data] , [callback] )
参数一:请求的URL地址
参数二:请求时候发送给服务器的数据
参数三:请求成功后的回调函数function
参数名 参数类型 是否必选 说明 url string 是 提交数据的地址 data object 否 要提交的数据 callback function 否 数据提交成功时的回调函数
使用 $.post()向服务器提交数据的例子
调用post()指定三个参数,提交的数据用对象的形式{ }进行存储,回调函数用在提交成功后的调用
效果
在页面中点击btn按钮
在调试工具是可以看到post请求的
相比于 $.get() 和 $.post() 函数,jQuery中提供的 $.ajax() 函数,是一个功能比较综合(即可get、也可post)的函数,它允许我们对Ajax请求进行更详细的配置
$.ajax()函数的基本语法
$.ajax({
type: ' ', //请求的方式,例如:get、post
url: ' ', //请求的URL地址
[data: { } ], //这次请求要进行携带的数据
success: function(res){ } //请求成功之后的回调函数
})
属性名是要写的哦
使用 $.ajax()发起get请求时,只需要将 type属性 的值 设置为 'GET' 即可 (GET可以是大写和小写,建议写大写)
这样就可以实现从这个url地址中get到了数据
当然,data这个参数是可以省略的
$(function () {
$('.btnGET').on('click', function () {
$.ajax({
type: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
success: function (res) {
console.log(res);
}
})
})
})
这样子就获取到全部ID的图书了
使用 $.ajax()发起post请求时,只需要将 type属性 的值 设置为 'POST' 即可 (POST可以是大写和小写,建议写大写)