【Ajax】jQuery中Ajax的使用

╰+攻爆jí腚メ 2023-10-08 15:17 7阅读 0赞

### 【Ajax】jQuery Ajax的使用 ###

**简介**：jQuery提供多个与Ajax有关的方法。通过jQuery Ajax方法，能够使用HTTP Get和 HTTP Post从远程服务器上请求文本、HTML、XML或JSON同时能够把接受的数据更新到DOM对象。

#### 1、$.ajax() ####

*  $.ajax()是jQuery中Ajax请求的核心方法，所欲的其他方法都是在内部使用此方法。
 *  语法：
    
    > $.ajax(\{name: value, name: value, …\})
    > 
    > 说明：参数是JSON格式的数据，包含请求方式，数据，回调方法等
 *  async：布尔值，表示请求是否异步处理。默认是tru。
 *  contentType：发送数据到服务器时所使用的内容类型。默认是：
    
    > “application/x-www-form-urlencoded”
 *  data：规定要发送到服务器的数据，可以是：string，数组，多数是json
 *  dataType：期望从服务器响应的数据类型。jQuery从xml，json，text，html这些中测试最可能的类型
    
    > “xml” - 一个XML文档
    > 
    > “html” - HTML作为纯文本
    > 
    > “text” - 纯文本字符串
    > 
    > “json” - 以JSON运行响应，并以对象返回
 *  error(xhr, status, error)：如果请求失败要运行的函数，其中xhr、status、error是自定义的形参名（其中xhr为XMLHttpReuqest对象）
 *  success(result, status, xhr)：当请求成功时运行的函数，其中result，status，xhr是自定义的形参名（其中xhr为XMLHttpReuqest对象）
 *  type：规定请求的类型（GET或POST等），默认是GET，get、post不用区分大小写
 *  url：规定发送请求的URL

#### 2、$.get() ####

*  $.get()方法使用HTTP GET请求从服务器加载数据
 *  语法：
    
    > $.get(url, data, function(data, status, xhr), dataType)
 *  url：必选，规定需要请求的URL
 *  data：可选，规定联通请求发送服务器的数据
 *  function(data, status, xhr)可选，当请求成功时运行的函数。data，status，xhr是自定义形参名。
    
    > data - 包含来自请求的结果数据
    > 
    > status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
    > 
    > xhr - 包含XMLHttpRequest对象
 *  dataType：可选，规定预期的服务器响应的数据类型。默认的，jQuery会智能判断。可能的类型：
    
    > “xml” - 一个XML文档
    > 
    > “html” - HTML作为纯文本
    > 
    > “text” - 纯文本字符串
    > 
    > “json” - 以JSON运行响应，并以对象返回

#### 3、$.post() ####

*  $.post()方法使用HTTP POST请求从服务器加载数据。
 *  语法：$  . p o s t ( U R L , d a t a , f u n c t i o n ( d a t a , s t a t u s , x h r ) , d a t a T y p e ) ， 参 数 同 .post(URL, data, function(data, status, xhr), dataType)，参数同 .post(URL,data,function(data,status,xhr),dataType)，参数同 $.get()

#### 4、应用实例 ####

##### （1）简介与注意事项 #####

*  简介：该案例运行时如下图所示，选择省会名称会自动通过异步操作得到对应的城市列表。  
    ![在这里插入图片描述][756886c0f01e4cae95ed01ebc95fa8c9.png]
 *  注：由于本文主要用于解释异步操作在此案例中的作用，故数据库连接部分代码不再展示。
 *  数据库中存在两个表，表结构如下：
    
     *  city  
        ![在这里插入图片描述][1c3e51d6825247b4b4639e9b29e60274.png]
     *  province  
        ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_16_color_FFFFFF_t_70_g_se_x_16]
 *  项目目录结构(各文件作用不再赘述)  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_7_color_FFFFFF_t_70_g_se_x_16]

##### （2）主要源码 #####

*  CityServlet.java
    
        package com.Etui.controller;
        
        import com.Etui.dao.CityDao;
        import com.Etui.entity.City;
        import com.fasterxml.jackson.databind.ObjectMapper;
        import com.mysql.cj.xdevapi.JsonArray;
        
        import javax.servlet.*;
        import javax.servlet.http.*;
        import javax.servlet.annotation.*;
        import java.io.IOException;
        import java.io.PrintWriter;
        import java.util.List;
        
        @WebServlet(name = "CityServlet", value = "/province/city")
        public class CityServlet extends HttpServlet {
              
            @Override
            protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              
                String json = "";
                response.setContentType("text/html;charset=utf-8");
                PrintWriter out = response.getWriter();
                CityDao dao = new CityDao();
        
                String provinceId = request.getParameter("provinceId");
        //        System.out.println(provinceId);
        
                // 根据省id查询对应省所包含的城市
                List<City> citys = dao.findForId(provinceId);
        //        System.out.println(citys.toString());
        
                // 将查询结果转换为JSON格式
                ObjectMapper om = new ObjectMapper();
                json = om.writeValueAsString(citys);
        //        System.out.println("CityServlet => " + json);
        
                // 将json格式的数据响应给前端页面
                out.print(json);
        
            }
        }
    
     *  ProvinceServlet.java
    
        package com.Etui.controller;
        
        import com.Etui.dao.ProvinceDao;
        import com.Etui.entity.Province;
        
        import javax.servlet.*;
        import javax.servlet.http.*;
        import javax.servlet.annotation.*;
        import java.io.IOException;
        import java.util.List;
        
        @WebServlet(name = "ProvinceServlet", value = "/index")
        public class ProvinceServlet extends HttpServlet {
              
            @Override
            protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              
                ProvinceDao dao = new ProvinceDao();
                // 查询所有省会名称并存入数组中
                List<Province> provinceList = dao.findAll();
                // 将数据转发给前端页面
                request.setAttribute("provinceList", provinceList);
                request.getRequestDispatcher("cascade.jsp").forward(request, response);
            }
        }
    
     *  cascade.jsp(**主要的异步代码在此处**)
        
            <%@ page import="java.util.List" %>
            <%@ page import="com.Etui.entity.Province" %><%--
              Created by IntelliJ IDEA.
              User: 34162
              Date: 2022/4/11
              Time: 8:46
              To change this template use File | Settings | File Templates.
            --%>
            <%@ page contentType="text/html;charset=UTF-8" language="java" %>
            <html>
            <head>
                <title>$Title$</title>
                <script type="text/javascript" src="./js/jQuery.js"></script>
                <script type="text/javascript">
                    $(document).ready(function() {
                      
                        // $("#province");
                        $("#province").change(function () {
                      
                            // console.log($("#province").val());
                            var provinceId = $("#province").val();
                            if(provinceId !== "" && provinceId !== null) {
                      
                                console.log(provinceId);
                                // 通过异步操作获取城市下拉列表
                                $.ajax({
                      
                                  type: "get",
                                  url: "/myWeb/province/city",
                                  data: {
                      
                                    "provinceId": provinceId
                                  },
                                  success: function (result) {
                      
                                      // 先清除原有的元素，再添加新的元素
                                      $("#def").attr("disabled", true);
                                      $("#city").html("<option value='' disabled>请选择...</option>");
            
                                      console.log(result === "[]");
                                      if(result === "[]") {
                      
                                          $("#city").html("<option value='' >无数据...</option>");
                                      } else {
                      
                                          var jsonObj = eval("(" + result + ")");
                                          // 遍历JSON对象，并加载市下拉列表
                                          for (var i in jsonObj) {
                      
                                              // console.log(jsonObj[i].name);
                                              $("#city").append("<option value="+ jsonObj[i].id +">" + jsonObj[i].name + "</option>");
                                          }
                                      }
                                  },
                                  contentType: "json"
                                });
                            } else {
                      
                                $("#city").html("<option value='' >无数据...</option>");
                                console.log("空值");
                            }
                        });
                    });
                </script>
            </head>
            <body>
            <%
                // 读取省会名称数组
                List<Province> provinceList = (List<Province>) request.getAttribute("provinceList");
            %>
            <table>
                <tr>
                    <td>省会</td>
                    <td>
                        <select name="province" id="province">
                            <option value="" id="def">请选择...</option>
                            <% for(int i=0; i< provinceList.size(); i++) { %>
                            <option value="<%= provinceList.get(i).getId() %>"><%= provinceList.get(i).getName() %></option>
                            <% } %>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>城市</td>
                    <td>
                        <select name="city" id="city">
                            <option value="">请选择...</option>
                        </select>
                    </td>
                </tr>
            </table>
            </body>
            </html>

##### （3）运行结果 #####

![请添加图片描述][72baf76064b34038af93b215c27f394c.gif]

#### Over！ ####

[756886c0f01e4cae95ed01ebc95fa8c9.png]: https://img-blog.csdnimg.cn/756886c0f01e4cae95ed01ebc95fa8c9.png
[1c3e51d6825247b4b4639e9b29e60274.png]: https://img-blog.csdnimg.cn/1c3e51d6825247b4b4639e9b29e60274.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5ce5eb362ea74ad191b0421f3c4123ad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE=,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_7_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/40c87325bb394868b98249c014183ca6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE=,size_7,color_FFFFFF,t_70,g_se,x_16
[72baf76064b34038af93b215c27f394c.gif]: https://img-blog.csdnimg.cn/72baf76064b34038af93b215c27f394c.gif