jQuery中的Ajax
jQuery中的Ajax
-
六个Ajax操作方法
- load()方法
- $.get()方法
- $.post()方法
- $.ajax()方法
- $.getScript()方法
- $.getJSON(方法
-
六种事件
-
ajaxStart()
-
ajaxStop()事件
-
ajaxComplete()事件
-
ajaxSend()事件
-
ajaxError()事件
-
ajaxSuccess()事件
-
load()方法
load()方法的请求方式由是否传递参数决定。即传递参数,为GET方式;不传递参数,为POST方式。
-
load(url,data,callback)方法
- 参数
- url - 异步请求的地址
- data - 异步请求的数据
- 如果省略请求数据的话,当前的请求方式为
GET
- 如果发送请求数据的话,当前的请求方式为
POST
- 如果省略请求数据的话,当前的请求方式为
- callback - 异步请求成功后的回调函数
- 返回值 - 服务器响应的结果
- 注意 - 自动将返回结果写入到目标元素中
- 参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮</button>
<script src="js/js/jquery-1.12.4.js"></script>
<script>
$('button').click(function () {
$('button').load('./data./server2.txt',{name:'张无忌'},function () {
console.log('异步请求成功');
})
})
</script>
</body>
</html>
$.get()方法与 $.post()方法
- $.get()方法使用get方式向服务器端发送异步请求
- $.post()方法使用POST方式向服务器端发送异步请求
-
$.get(url,data,callback,type)方法 -- 请求方式为GET $.post(url,data,callback,type)方法
- 参数
- url - 异步请求的地址
- data - 异步请求的数据
- callback - 异步请求成功后的回调函数
- type - 设置服务器满响应结果的格式
- 值为
xml
、html
、script
、json
、text
和default
- 值为
- 返回值 - 服务器响应的结果
- 注意 - 自动将返回结果写入到目标元素中
- 参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮</button>
<script src="js/js/jquery-1.12.4.js"></script>
<script>
$('button').click(function () {
$.get('data/server2.json',{name:'张无忌'},function (response) {
console.log(response);
},'json')
$.post('data/server2.json',{name:'张无忌'},function (response) {
console.log(response);
},'json')
})
</script>
</body>
</html>
$.ajax()方法
$.ajax(方法是jQuery中最为底层的Ajax方法
-
$.ajax(url,[settings])
- 参数
- url-异步请求的地址
- settings - 设置异步请求的参数
- settings选项 - 对象类型
- type - 设置请求方式
- data - 发送给服务器端的请求数据
- dataType - 服务器端响应结果的格式
- success - 异步请求成功后的回调函数
- function(data,textStatus,jqXHR){}
- data - 表示服务器端响应的结果
- textStatus - 表示服务器端当前的状态
- jqXHR - Ajax中的核心对象
- function(data,textStatus,jqXHR){}
- 参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮</button>
<script src="js/js/jquery-1.12.4.js"></script>
<script>
$('button').click(function () {
$.ajax('data./server2.json', {
type : 'get',
dataType : 'text',
success:function (data) {
console.log(data);
}
})
})
</script>
</body>
</html>
$.getSacipt()方法
$.getScript方法是jQuery中用于动态加载指定JavaScript文件 – 目的就是提升js文件加载的速度
-
$.getScript(url,[callback]);
- url请求
- JavaScript文件的ul地址。
- callback
- 指定JavaScript文件成功加载后的回调函数。
- url请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮</button>
<script src="js/js/jquery-1.12.4.js"></script>
<script>
$('button').click(function () {
// 动态加载指定JavaScript文件,并且执行
$.getScript('./data/server3.js',function (data) {
console.log(data);
eval(data)
})
})
</script>
</body>
</html>
$.get.JSON()方法
$.getJSON()方法是jQuery中用于动态加载指定JSON格式的数据内容 –
请求只能用GET
-
$.getJSON(url,[data],[callback]);
- url
- 请求JavaScript文件的url地址。
- data
- 发送给服务器端的key/value形式的数据内容。
- callback
- 指定JavaScript文件成功加载后的回调函数。
- url
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮</button>
<script src="js/js/jquery-1.12.4.js"></script>
<script>
$('button').click(function () {
// getJSON()方法的请求方式为GET
$.getJSON('./data/server2.json',{name:"张无忌"},function (data) {
console.log(data)
})
})
</script>
</body>
</html>