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

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