jQuery中的Ajax
一、jQuery提供的六个Ajax操作方法
1、load()方法
$element.load(url,[data],[callback])
- 参数:
- url:异步请求的HTML 页面的url地址。
- data: 发送给服务器端的key/value形式的数据内容。
- 如果省略请求数据的话,当前的请求方式为GET
- 如果发送请求数据的话,当前的请求方式为POST
- callback: Ajax请求完成时的回调函数。
- 返回值:
- 服务器端的响应结果
- 注意:自动返回结果写入到元素中
2、 . g e t ( ) 与 .get()与 .get()与.post()方法
$.get()
请求方式为GET
$.get(url,[data],[callback],[type])
参数:
- url:请求HTML页面的url地址。
- data:发送给服务器端的key/value形式的数据内容。
- callback: Ajax请求完成时的回调函数。
- type:设置返回数据内容的格式。值为xml、html、 script、 JSON、 text和_default。
$.post()
跟get一样
3、$.ajax()方法
$.ajax(url,[settings])
参数:
- url - 请求地址
- settings -设置异步请求的参数
settings选项对象类型:
- type -设置请求方式
- data- 发送给服务器端的请求数据
- dataType -服务器端响应结果的格式
- success -异步请求成功后的回调函数
- function(data, textStatus, jqXHR){}
- data-表示服务器端响应的结果
- textStatus -表示服务器端当前的状态
- jqXHR - Ajax中的核心对象
- function(data, textStatus, jqXHR){}
$.ajax('url',{
type:'',
dataType:'',
success:function(){
}
})
4、$.getScript()方法
是jQuery中动态加载js文件的方法
$.getScript(url,[callback])
5、$.getJSON()方法
请求方式始终是:GET
三级联动案例
ssk.json
[
{
"name":"javascript",
"value": [
"java","javascript"
]
},
{
"name": "jquery",
"value": [
"jquery","锋利的JQuery"
]
}
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框</title>
<style>
.container #search {
width: 500px;
}
.container .alert {
width: 500px;
border: 1px solid lightgray;
display: none;
}
.container .alert ul {
list-style: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="container">
<!-- 搜索框-->
<input type="text" id="search">
<!-- 提示框-->
<div class="alert">
<ul>
<li>前端开发</li>
<li>前端课程</li>
<li>Web课程</li>
</ul>
</div>
</div>
<script src="js/jquery-1.10.1.js"></script>
<script >
// 捕获用户输入行为:
/*
* 1、绑定键盘事件 keydown keyup keypress
* 2、键盘输入事件 input
*
*/
$('#search').bind('keydown',function () {
$('.alert>ul').empty()
// 根据输入的内容动态的获取相关提示数据
var inputValue = $(this).val()
$.getJSON('data/ssk.json',function (data) {
// 遍历json
$.each(data,function (index,obj) {
var name = obj.name
if(name.indexOf(inputValue) >= 0){
var value = obj.value
$.each(value,function (index,text) {
$('.alert>ul').append($('<li>'+text+'</li>'))
})
}
})
})
// 将提示框隐藏状态切换到显示状态
$('.alert').css('display','block')
}).bind('blur',function () {
$('.alert').css('display','none')
})
</script>
</body>
</html>
二、异步提交表单
通过Ajax异步交互方式提交表单
步骤如下:
- 获取表单及所有表单组件对应的数据值。
- 将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。
- 通过Ajax异步交互方式提交表单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<script src="js/jquery-1.10.1.js"></script>
<form action="">
<input type="text" id="name">
<input type="submit">
</form>
<script >
$('form').bind('submit',function (event) {
event.preventDefault()
// 获取表单组件内容
var name = $('#name').val()
// 构建发送给服务器端的数据格式
var data = 'name=' + name
// 通过异步交互提交表单
$.post('data/server.js',data,function (res) {
console.log(res)
})
})
</script>
</body>
</html>
三、表单序列化
- serialize(方法: 将表单组件对应的数据值序列化为指定格式的字符串内容。
$('form").serialize()
- serializeArray(方法: 将表单组件对应的数据值序列化为、JSON格式的数据内容。
香
$('select, :radio').serializeArray()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单序列化</title>
</head>
<body>
<script src="js/jquery-1.10.1.js"></script>
<form action="">
<input type="text" name="username" id="name">
<input type="text" name="password" id="pwd">
<input type="submit">
</form>
<script >
$('form').bind('submit',function (event) {
event.preventDefault()
// 表单序列化、
// var data = $('form').serialize()
var data = $('form').serializeArray()
console.log(data)
// 通过异步交互提交表单
$.post('data/server.js',data,function (res) {
console.log(res)
})
})
</script>
</body>
</html>