jQuery中的Ajax
jQuery提供了六个Ajax操作方法
- load()
- $.get 和 $.post 方法
- $.ajax 方法
- $.getScript 方法和 $.JSON 方法
jQuery提供的事件
- ajaxStart 和 ajaxStop
- ajaxComlete、ajaxSend、ajaxError、ajaxSuccess 事件
load()方法
load()方法是jQuery中最为简单的Ajax方法
基本语法结构
$element.load(url,[data],[callback])
- url:请求HTML页面的url地址
- data:发送给服务器端的key/value形式的数据内容
- callback:Ajax请求完成时的回调函数
load()方法的请求方式由是否传递参数决定 如果传递参数 为GET方式 反之为POST方式
// HTML:<button id="btn">按钮</button>
$("button").click(function () {
$("button").load("server.json", {
name: "xyb"
}, function () {
console.log("异步请求成功")
})
})
. g e t ( ) 和 .get()和 .get()和.post方法
$.get()方法使用GET方式向服务器端发送异步请求
基本语法结构
$.get(url,[data],[callback],[type])
- url:请求的地址
- data:请求的数据。键值对形式。
- callback:请求完成时的回调函数。会将请求数据的结果作为回调函数的参数传入。
- type:设置返回数据内容的格式。值为 xml、html、script、json、text等
// HTML:<button id="btn">按钮</button>
$("button").click(function(){
$.get("server.json",{name:"xyb"},function(response) {
console.log("请求成功")
console.log(response)
})
})
ajax()方法
$.ajax方法是jQuery中最为底层的Ajax方法
基本语法结构
$.ajax(url[settings])
- url:请求地址
- settings:设置异步请求的参数
$("button").click(function () {
$.ajax("server.json", {
type: "get",
success: function (data) {
console.log(data)
}
})
})
$.getScript()方法
$.getScript()方法是jQuery中用于动态加载指定JavaScript文件
基本语法结构
$.getScript(url[callback])
- url:请求JavaScript文件的url地址
- callback:指定JavaScript文件成功加载后的回调函数。
$("button").click(function () {
// 动态加载指定的JavaScript文件 并执行 目的就是为了提升JS文件加载的时间
$.getScript("server.js", function (data) {
console.log(data)
eval(data)
})
})
$.getJSON()方法
$.getJSON()方法是jQuery中用于动态加载指定JSON格式的数据内容
基本语法结构
$.getJSON(url,[data],[callback])
- url:请求JavaScript文件的url地址。
- data:发送给服务器端的key/value形式的数据内容。
- callback:指定JavaScript文件成功加载后的回调函数。
$("button").click(function () {
// getJSON 请求方式为GET
$.getJSON("server.json", function (data) {
console.log(data)
})
})
异步提交表单
<body>
<form action="#">
<input type="text" name="" id="name">
<input type="submit">
</form>
</body>
<script>
$("form").bind("submit", function (event) {
// 阻止默认行为
event.preventDefault();
// 获取表单组件内容数据
let name = $("#name").val();
console.log(name)
// 构建发送给服务器的格式
let data = "name" + name;
// 异步交互提交表单
$.post("server5.json",data,function(respone){
console.log(data)
})
})
</script>
表单序列化
-
serialize () 方法
将表单组件对应的数据值序列化为指定格式的字符串内容。
-
serializeArray () 方法
将表单组件对应的数据值序列化为 JSON 格式的数据内容。