jQuery中的Ajax
- 六个Ajax操作方法
- load()方法
- $.get()方法
- $.post()方法
- $.ajax()方法
- $.getScript()方法
- $.getJSON()方法
load()方法
load()方法的请求方式由是否传递参数决定。即传递参数,为GET方式;不传递参数,为POST方式。
-
load(url,data,callback)方法
- 参数
- url - 异步请求的地址
- data - 异步请求的数据
- 如果省略请求数据的话,当前的请求方式为
GET
- 如果发送请求数据的话,当前的请求方式为
POST
- 如果省略请求数据的话,当前的请求方式为
- callback - 异步请求成功后的回调函数
- 返回值 - 服务器响应的结果
- 注意 - 自动将返回结果写入到目标元素中
- 参数
<body>
<button>按钮</button>
<script src="js/jquery-1.12.4.js"></script>
<script>
$('button').click(function(){
$('button').load('data/server1.json',function(){
console.log('异步请求成功')
})
})
</script>
</body>
$.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
- 值为
- 返回值 - 服务器响应的结果
- 注意 - 自动将返回结果写入到目标元素中
- 参数
<button>按钮</button>
<script src="js/jquery-1.12.4.js"></script>
<script>
$('button').click(function(){
$.get('data/server1.json',{name:'张无忌'},function(response){
console.log(response)
},'json')
$.post('data/server1.json',{name:'张无忌'},function(response){
console.log(response)
},'json')
})
</script>
$.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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ajax方法</title>
</head>
<body>
<button>按钮</button>
<script src="js/jquery-1.12.4.js"></script>
<script>
$('button').click(function(){
$.ajax('data/server1.json',{
type:'get',
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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>getScript</title>
</head>
<body>
<button>按钮</button>
<script src="js/jquery-1.12.4.js"></script>
<script>
$('button').click(function(){
$.getScript('data/server2.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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>getJSON</title>
</head>
<body>
<button>按钮</button>
<script src="js/jquery-1.12.4.js"></script>
<script>
$('button').click(function(){
$.getJSON('data/server1.json',{name:"林俊杰"},function(data){
console.log(data)
})
})
</script>
</body>
</html>