$.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根据开发实情来选择是否需要。

    实例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script src="static/js/jquery.js"></script>
    8.     <script>
    9.         $(function () {
    10.             $("#searchBtn").click(function () {
    11.                 $.ajax({
    12.                     url: "QueryProvinceServlet",
    13.                     type: "get",
    14.                     dataType: "json",
    15.                     success: function (data) {
    16.                         $.each(data, function (index, element) {
    17.                             $("#province").append(
    18.                                 "<option value='" + element.id + "'>" + element.provinceName + "</option>"
    19.                             );
    20.                         });
    21.                     }
    22.                 });
    23.             });
    25.             $("#province").change(function () {
    26.                 let selected = $("#province>option:selected");
    27.                 let provinceId = selected.val();
    28.                 if (provinceId === '0') {
    29.                     alert("请选择一个省份！");
    30.                 } else {
    31.                     $.ajax({
    32.                         url: "QueryCityServlet",
    33.                         type: "post",
    34.                         data: {"provinceId": provinceId},
    35.                         dataType: "json",
    36.                         success: function (data) {
    37.                             $("#city").empty();
    38.                             $("#city").append(
    39.                                 "<option value='" + 0 + "'> 请选择...  </option>"
    40.                             );
    41.                             $.each(data, function (index, element) {
    42.                                 $("#city").append(
    43.                                     "<option value='" + element.id + "'>" + element.cityName + "</option>"
    44.                                 );
    45.                             });
    46.                         }
    47.                     });
    48.                 }
    49.             });
    50.         });
    51.     </script>
    52. </head>
    53. <body>
    55. <b>省份：</b>
    56. <select id="province">
    57.     <option value="0">请选择...</option>
    58. </select><br><br>
    59. <input type="button" value="查询省份" id="searchBtn"><br><br>
    60. <b>城市：</b>
    61. <select id="city">
    62.     <option value="0">请选择...</option>
    63. </select><br>
    64. </body>
    65. </html>

    image.png
    运行结果不好展示，大概就是查询到了省份之后，下面的城市框就会出现这个省份的城市