jQuery 中的 Ajax
jQuery 提供了六个 Ajax 操作的方法:
load()
$.get()
$.post()
$.ajax()
$.getScript()
$.getJSON()
其中 get()
和 post()
是基于 $.ajax()
的封装;
load()
是基于 get()
和 post()
的封装。
jQuery 提供了六个事件:
ajaxStart()
ajaxStop()
ajaxComplete()
ajaxSend()
ajaxError()
ajaxSuccess()
load()
方法
load()
方法可以简单的实现异步交互,但是限制颇多。语法结构:
load(url, data, callback)
参数说明:
- url:服务器地址
- data:请求数据,可忽略
- callback:回调函数
load 方法发送的请求,当 data
被忽略时为 get 请求,若 data 被传入参数为 post 请求。
load 方法有一个缺陷,会将服务端的响应结果赋值给调用 laod 方法的元素的文本属性,如下代码所示:
<body>
<button id="btn">按钮</button>
<script>
$('#btn').on('click',function (){
$('#btn').load('sever.json', function (){
console.log('request win!')
})
})
</script>
</body>
结果:
通过浏览器自带抓包工具,这次请求的方法为 get 方法:
接下来测试使用 load()
方法时,传入 data
:
$('#btn').on('click',function (){
$('#btn').load('sever.json',{user: "12345", pwd: "111"}, function (){
console.log('request win!')
})
})
请求结果和附带参数:
当 load 方法有没有忽略 data 形参时,请求为 post。
get()
方法
jQuery 提供了一个 get()
方法用来专门发送 get 请求。语法结构:
$.get(url, data, callback, type)
参数说明:
- url:设置服务端的请求地址
- data:设置发送的是数据
- callback:回调函数,该函数有一个
response
参数,其中有服务端响应的数据。 - type:指定服务端返回的数据类型;可以为 html、xml、json、script、text 等
type位置的参数在传入时为 String 类型。
在使用 get
方法时,直接使用 $
调用。
如下代码所示:
<body>
<button>发送</button>
<script>
$('button').click(function (){
$.get('sever.json', {user: 'hel'}, function (response){
console.log("request win!")
console.log(response)
});
})
</script>
</body>
结果:
在上述代码中,如果将 type 位置的参数写为 script 则接收不到数据。如下所示:
$('button').click(function (){
$.get('sever.json', {user: 'hel'}, function (response){
console.log("request win!")
console.log(response)
}, 'script');
})
再次点击发送按钮,看不到任何数据,因为服务端返回的数据为 json,这里规定的返回格式为 script。
post()
方法
post 方法的语法结构和 get 相同用法也相同,示例代码:
<body>
<button>发送</button>
<script>
$('button').click(function (){
$.post('sever.json', {user: 'hel'}, function (response){
console.log("request win!")
console.log(response)
}, 'json');
})
</script>
</body>
请求结果:
ajax()
方法
ajax()
方法是 jQuery AJAX 的底层。
利用 $.ajax()
实现简单的小通信,这也是 ajax
方法的最简单用法:
<body>
<button id="btn">发送</button>
<script>
$('#btn').on('click', function (){
$.ajax('sever.json',{
type: 'get',
success: function (data,textStatus){
console.log(data)
console.log(textStatus)
}
})
})
</script>
</body>
需要注意的是,$.ajax
方法中第二个参数在传入的时候为一个对象,该对象内写一些其他的信息。
结果:
$.getScript()
方法
jQuery 的 getScript()
方法可以动态加载 JavaScript 文件,并且加载完成之后立即执行,语法结构如下:
$.getScript(url, callback)
如下代码所示:
<body>
<button id="btn">发送</button>
<script>
$('#btn').on('click',function (){
$.getScript('sever.js', function (){
console.log('yes')
})
})
</script>
</body>
结果:
getJSON()
方法
jQuery 提供了 getJSON
方法用来专门使用 get 方法获取 json 数据。
如下代码:
<body>
<script>
$.getJSON('sever.json',function (){
console.log('yes')
})
</script>
</body>
getJSON()
方法一直为 get 请求。
表单异步提交
这里的表单异步提交主要是针对 form
组件中的 submit
按钮,
该按钮的提交方式为同步提交(提交后会刷新页面),需要阻止默认方式,
重新设置为异步提交,如下代码所示:
<body>
<form action="#">
<input type="text">
<input type="submit">
</form>
<script>
$('input[type=submit]').on('click', function (event) {
event.preventDefault()
var input_data = $('input[type=text]').val()
var request_data = 'data=' + input_data
$.post('sever.json', request_data, function (response){
console.log(response)
})
})
</script>
</body>
结果:
表单序列化
serialize()
:将表单组件对应的值生成对应格式的字符串serializeArray()
:将表单组件对应的值生成 JSON 格式的数据内容
在使用这两个方法时,为 from
中 input
组件设置 name
属性,
否则无法通过序列化方法格式化表单组件中的 value 属性。
如下代码所示:
<body>
<form action="#">
<input type="text" name="username" id="user">
<input type="text" name="password" id="pwd">
<input type="submit">
</form>
<script src="./jquery-1.12.4.js"></script>
<script>
$('form').on('submit',function (event){
event.preventDefault()
var data = $('form').serializeArray();
console.log(data)
$.post('sever.json',data, function (response){
console.log(response)
})
})
</script>
</body>
结果: