爱站程序员基地使用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/jsondata: //可以使用字符串、数组、json，表示请求的参数dataType: //表示期望从服务器获取的数据格式，可选：xml、html、text、jsonerror: //一个函数，表示请求发生错误时，执行的函数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: ccDate: 2020/7/3Time: 18:41To 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>
