$.ajax()函数是jQuery库中最核心的函数,是用来实现ajax请求的一个函数;借助该函数,可以大量简化ajax请求的步骤,因为jQuery已经把很多步骤封装好了,直接调用封装好的函数就可以了,比如:创建异步对象、绑定事件…这些都已经被封装了。
语法格式:$.ajax({
key:value,
key:value,
……
});
重要的key-value:
url:请求访问服务端中的地址,例如:某个servlet的地址;
type:表示请求的方式,get还是post请求,该参数不区分大小写;
data:表示提交的请求参数,可以是String、数组、json类型的,首选json;
dataType:发起请求后,希望服务端返回的数据格式(json、text、html、xml),当时服务器返回
的数据格式不一定就是期望的格式;
success:函数function,当服务端返回数据之后,jQuery处理完数据之后执行该function,等同于
异步对象中的xmlHttp.readyState === 4 && xmlHttp.status === 200,例如:
success:function(resp){前端工程师·处理返回的数据}
resp是自定义参数,相当于resp=xmlHttp.responseText
error:函数function,当请求错误的时候执行的函数;
contentType:表示请求的参数数据格式,首先json;
async:布尔值,为true表示异步请求,为false表示同步请求,默认为true;
在上述的各种key-value中,其中必须的是url和success,其余的key-value根据开发实情来选择是否需要。
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="static/js/jquery.js"></script>
<script>
$(function () {
$("#searchBtn").click(function () {
$.ajax({
url: "QueryProvinceServlet",
type: "get",
dataType: "json",
success: function (data) {
$.each(data, function (index, element) {
$("#province").append(
"<option value='" + element.id + "'>" + element.provinceName + "</option>"
);
});
}
});
});
$("#province").change(function () {
let selected = $("#province>option:selected");
let provinceId = selected.val();
if (provinceId === '0') {
alert("请选择一个省份!");
} else {
$.ajax({
url: "QueryCityServlet",
type: "post",
data: {"provinceId": provinceId},
dataType: "json",
success: function (data) {
$("#city").empty();
$("#city").append(
"<option value='" + 0 + "'> 请选择... </option>"
);
$.each(data, function (index, element) {
$("#city").append(
"<option value='" + element.id + "'>" + element.cityName + "</option>"
);
});
}
});
}
});
});
</script>
</head>
<body>
<b>省份:</b>
<select id="province">
<option value="0">请选择...</option>
</select><br><br>
<input type="button" value="查询省份" id="searchBtn"><br><br>
<b>城市:</b>
<select id="city">
<option value="0">请选择...</option>
</select><br>
</body>
</html>
运行结果不好展示,大概就是查询到了省份之后,下面的城市框就会出现这个省份的城市