jQuery中的Ajax
jQuery不仅对JavaScript语言进行了封装,也对Ajax异步交互进行了封装,也对Ajax异步交互进行了封装。jQuery提供了六个Ajax操作的方法。
+load()
方法
$.get()
方法$.post()方法
$.ajax()
方法$.getScript()
方法 和$.getJSON()
方法
jQuery除了封装六个Ajax操作的方法,还提供了以下几种事件:
ajaxStart()
和ajaxStop()
事件ajaxComplete()
事件、ajaxSend()
事件、ajaxError()
事件、ajaxSuccess()
事件
1、 load()
方法
load()
方法是jQuery中最为简单的Ajax方法,其语法结构如下:
$element.load(url,[data],[callback]);
- url:请求HTML页面的url地址。
- data:发送给服务器端的key/value形式的数据内容。
- callback:Ajax请求完成时的回调函数。
注意:
load()
方法的请求方式由是否传递参数决定。即传递参数,为GET方式;不传递参数,为POST方式。
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>load()方法</title>
</head>
<body>
<button id="btn">按钮</button>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$('#btn').click(function(){
/*
load(url,data,callback)方法
* 参数
* url - 异步请求的地址
* data - 异步请求的数据
* 如果省略请求数据的话,当前的请求方式为GET
* 如果发送请求数据的话,当前的请求方式为POST
* callback - 异步请求成功后的回调函数
* 返回值 - 服务器端的响应结果
* 注意 - 自动将返回结果写入到目标元素中
*/
$('#btn').load('server.json',{name:'猪猪侠'},function(){
console.log('异步请求成功...');
})
});
</script>
</body>
</html>
2、 $.get()
方法和$.post()
方法
$.get()
方法使用GET方式向服务器端发送异步请求。
$.post()
方法使用POST方式向服务端发送异步请求。
其语法结构如下:
$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[type])
参数如下:
- url:请求HTML页面的url地址。
- data:发送给服务器端的key/value形式的数据内容
- callback:Ajax请求完成时的回调函数。
- type:设置返回数据内容的格式。值为xml、html、script、json、text和_default。
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>get()和post()方法</title>
</head>
<body>
<button id="btn">按钮</button>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$('#btn').click(function () {
/*
get(url,data,callback,type)方法
post(url,data,callback,type)方法
* 参数
* url - 异步请求的地址
* data - 异步请求的数据
* callback - 异步请求成功后的回调函数
function(reponse){}
* type - 设置服务器端的响应结果格式
* 可以为xml、html、script、json、text等
*/
$.get('server.json', {
name: '猪猪侠'
}, function (response) {
console.log(response);
});
});
</script>
</body>
</html>
3、 $.ajax()
方法
$.ajax()
方法是jQuery中最为底层的Ajax方法,其语法结构如下:
$.ajax(url,[settings]);
- url : 请求HTML页面的url地址。
- settings : key/value形式的请求设置,所有参数都是可选的。
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax()方法</title>
</head>
<body>
<button id="btn">按钮</button>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$('#btn').click(function () {
/*
$.ajax(url,[settings])方法
* 参数
* url - 请求地址
* settings - 设置异步请求的参数
*settings选项 - 对象的类型
* type - 设置请求方式 get or post
* data - 发送给服务器端的请求数据
* dataType - 服务器端响应结果的格式
* success - 异步请求成功后的回调函数
function(data,textStatus,jqXHR){
* data - 表示服务器端响应的结果
* textStatus - 表示服务器端当前的状态
* jqXHR - Ajax中的核心对象
}
*/
$.ajax('../code/server1.json', {
type: 'get',
dataType: 'text', //设置响应格式
success: function (data) {
console.log(data);
}
})
});
</script>
</body>
</html>
4、$.getScript()
方法
$.getScript()
方法是jQuery中用于动态加载指定JavaScript文件,其语法结构如下:
$.getScript(url,[callback]);
- url : 请求JavaScript文件的url地址。
- callback : 指定JavaScript文件成功加载后的回调函数。
示例代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$.getScript()方法</title>
</head>
<body>
<button id="btn">按钮</button>
<script src="../js/jquery-1.12.4.js"></script>
</body>
<script>
$('#btn').click(function () {
$.getScript('../code/server2.js', function () {
console.log('你成功了!')
})
})
</script>
</html>
5、$.getJSON()
方法
$.getJSON()
方法是jQuery中用于动态加载指定JSON格式的数据内容,其语法结构如下:
$.getJSON(url,[data],[callback]);
- url : 请求JavaScript文件的url地址。
- data : 发送给服务器端的key/value形式的数据内容。
- callback : 指定JavaScript文件成功加载后的回调函数。
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$.getJSON()方法</title>
</head>
<body>
<button id="btn">按钮</button>
<script src="../js/jquery-1.12.4.js"></script>
</body>
<script>
$('#btn').click(function () {
$.getJSON('../code/server1.json', {name:'猪猪侠'},function (data) {
console.log(data);
})
})
</script>
</html>