使用前需要先导入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>