使用jQuery实现Ajax请求
使用jQuery实现Ajax请求的优点
- 代码实现更加简单，简化了ajax请求
- 不用考虑Ajax在不同浏览器上的实现不同
- 通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery中提供了三种函数实现Ajax请求
使用前需要先导入jQuery的JS库文件。下载地址：jQuery
- $.ajax()
$.ajax({
//参数说明
axync: //是一个boolean类型的值，默认为true，表示异步请求
contentType: //一个字符串，表示浏览器发送到服务器的参数类型json格式：application/json
data: //可以使用字符串、数组、json，表示请求的参数
dataType: //表示期望从服务器获取的数据格式，可选：xml、html、text、json
error: //一个函数，表示请求发生错误时，执行的函数
success: //表示请求成功时（readystate==2 && status==200）执行的函数
url: //请求地址
type: //请求类型 post/get
})
- $.post()
语法格式：
$.post(URL,data,callback);
//URL为请求地址
//data为提交的参数
//callback为请求成功后执行的函数
- $.get()
语法格式：
$.get(URL,callback);
实例
实现级联查询功能。运行样例如下，在省份列表框中点击福建省，即可在城市列表框中显示所属的城市。
前端代码如下（数据库、Servlet需另编写）：
<%--
Created by IntelliJ IDEA.
User: cc
Date: 2020/7/3
Time: 18:41
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>获取所有省份到select</title>
<script type="text/javascript" src="js/jQuery-3.5.1.js"></script>
<script>
function doAgax(){
$.ajax({
url:"queryProvince",
dataType:"json",
success:function (res) {
//将数据库省份加入下拉列表之前，先清除列表中的内容
$("#province").empty();
//循环将
$.each(res,function (i,n) {
$("#province").append("<option value='"+n.id+"'>"+n.name+"</option>");
})
}
})
}
$(function () {
//页面中dom加载完毕后直接显示省份
doAgax();
// $("#btn").click(function () {
// doAgax();
// })
//检测省份下拉列表框是否发生变化
$("#province").change(function () {
var obj = $("#province>option:selected");
var proId = obj.val();
//$.post()方法实现Ajax请求
$.post("queryCity",{
proId:proId},callBack,"json");
})
})
function callBack(res) {
//清空下拉列表框中的内容
$("#city").empty();
$.each(res, function (i,n) {
$("#city").append("<option value='"+n.id+"'>"+n.name+"</option>");
})
}
</script>
</head>
<body>
<table border="1px" cellpadding="0" cellspacing="0">
<tr>
<td>省份：</td>
<td>
<select id="province">
<option value="0">请选择...</option>
</select>
</td>
<%--<td><input type="button" id="btn" value="查询"></td>--%>
</tr>
<tr>
<td>城市：</td>
<td>
<select id="city">
<option value="0">请选择...</option>
</select>
</td>
</tr>
</table>
</body>
</html>
