Jquery第三篇【AJAX 相关的API】

不念不忘少年蓝@ 2021-09-17 06:46 250阅读 0赞

# 前言 #

前面我们已经学了讲解了Jquery的选择器，关于DOM 的API还有事件的API。本博文需要讲解**Jquery对AJAX的支持**…

我们在开始使用JavaScript学习AJAX的时候，创建异步对象时，**需要根据不同的浏览器来创建不同的对象….装载XML文件的时候，也有兼容性的问题。**

**Jquery就很好地屏蔽了浏览器不同的问题，不需要考虑浏览器兼容的问题**，这是非常非常方便我们开发的。

--------------------

# Jquery对ajax常用的API #

*  **$.ajax(\[options\])** 
 *  **load(url, \[data\], \[callback\])**
 *  **$.get(url, \[data\], \[fn\], \[type\])** 
 *  **$post(url, \[data\], \[callback\], \[type\])**
 *  **serialize()**

**前4个方法的功能都是差不多的，都是向服务器发送请求，得到服务器返回的数据**。

**最后一个是对表单的数据进行封装，将表单的数据封装成JSON格式**

## `load()` ##

首先，我们来使用一下load()这个方法吧。**在文档中对它的解释是这样子的。**

![这里写图片描述][SouthEast]

我来补充一下：

*  **第一个参数：表示的是要请求的路径**
 *  **第二个参数：要把哪些参数带过去给服务器端，需要的是JSON格式的**
 *  **第三个参数：回调方法，服务器返回给异步对象的时候，会调用该方法**

回调方法也有三个参数：

*  回调函数中参数一：backData表示返回的数据，它是js对象
 *  回调函数中参数二：textStatus表示返回状态的文本描述，例如：success，error，
 *  回调函数中参数三：xmlHttpRequest表示ajax中的核心对象

**一般地，我们只需要用到第一个参数！**

我们来使用这个方法来**获取当前的时间**，对这个方法熟悉一下：

**调用load方法的jquery对象，返回结果自动添加到jQuery对象代表的标签中间**

*  **如果带参数就自动使用post，不带参数自动使用get。**
 *  **使用load方法时，自动进行编码，无需手工编码**

<%-- Created by IntelliJ IDEA. User: ozc Date: 2017/5/18 Time: 13:36 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-1.8.2.js"></script>
    
      </head>
      <body>
      当前时间是：<span id="time"></span><br>
      <input type="button" id="button" value="获取当前时间">
    
      <script type="text/javascript"> $("#button").click(function () { //请求服务器端的路径 var url = "${pageContext.request.contextPath}/TimeServlet?time?" + new Date().getTime(); //没有要参数要带过去 //var sendData = null; /* * function方法的三个参数： * 第一个参数表示服务器端带回来的数据，是JS对象 * 第二个参数表示的是返回状态的文字描述【用处不大】 * 第三个参数表示的是异步对象，一般我们用来看服务器端返回的JSON的值是什么【用处还行】 * 因为第一个参数返回的是JS对象，因此我们是看不见具体JSON的值是什么，所以有的时候要用第三个参数 * * 值得注意的是： * 要想使用第三个参数，就必须把前两个参数给写上！ * 调用load方法的jquery对象，返回结果自动添加到jQuery对象代表的标签中间 * */ $("#time").load(url); }); </script>
    
    
      </body>
    </html>

*  Servlet代码：

protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String date = dateFormat.format(new Date()); PrintWriter writer = response.getWriter(); writer.write(date); writer.flush(); writer.close(); }

*  效果：

![这里写图片描述][SouthEast 1]

--------------------

## `$.get()` ##

上面的load()方法，当我们带参数给服务器的时候，就自动转化成post、不带参数的时候就转换成get。**$.get()就是指定是get方法**

**load()方法是使用Jquery对象来调用的，并且调用过后，会把数据自动填充到Jquery对象的标签中间，而$.get()并不是特定的Jquery对象来调用！**

**$.get(url, \[data\], \[fn\], \[type\])参数和load()是完全类似的，我们在上面的例子中该一下就行了。**

**由于$.get()是没有将返回的数据自动填充到标签之中，因此需要手动地添加到指定的标签之中！**

$.get(url, function (backData) { 
    
            //得到客户端返回的数据【JS对象】
    
            $("#time").append(backData);
          });

*  效果：

![这里写图片描述][SouthEast 2]

--------------------

## `$.post()` ##

**<nobr><span class="math" id="MathJax-Span-1" style="width: 4.749em; display: inline-block;"><span style="display: inline-block; position: relative; width: 3.789em; height: 0px; font-size: 125%;"><span style="position: absolute; clip: rect(1.763em 1000em 3.149em -0.424em); top: -2.717em; left: 0.003em;"><span class="mrow" id="MathJax-Span-2"><span class="mo" id="MathJax-Span-3" style="font-family: MathJax\_Main;">.</span><span class="mi" id="MathJax-Span-4" style="font-family: MathJax\_Math-italic; padding-left: 0.163em;">p</span><span class="mi" id="MathJax-Span-5" style="font-family: MathJax\_Math-italic;">o</span><span class="mi" id="MathJax-Span-6" style="font-family: MathJax\_Math-italic;">s</span><span class="mi" id="MathJax-Span-7" style="font-family: MathJax\_Math-italic;">t</span><span class="mo" id="MathJax-Span-8" style="font-family: MathJax\_Main;">(</span><span class="mo" id="MathJax-Span-9" style="font-family: MathJax\_Main;">)</span><span class="texatom" id="MathJax-Span-10"><span class="mrow" id="MathJax-Span-11"><span class="mo" id="MathJax-Span-12"><span style='font-family: STIXGeneral, "Arial Unicode MS", serif; font-size: 80%; font-style: normal; font-weight: normal;'>和</span></span></span></span></span><span style="display: inline-block; width: 0px; height: 2.723em;"></span></span></span><span style="border-left: 0.003em solid; display: inline-block; overflow: hidden; width: 0px; height: 1.47em; vertical-align: -0.397em;"></span></span></nobr><script type="math/tex" id="MathJax-Element-1">.post()和</script>.get()是十分类似的，只不过是把请求方式改变了，一般情况下，我们有参数传递给服务器的时候，都是用post方式的。**

**使用$.post()方法是需要设定编码的，它和load()方法是不一样的！**

下面使用**检查用户名和密码是否合法**的案例来说明这两个方法：

<%-- Created by IntelliJ IDEA. User: ozc Date: 2017/5/18 Time: 13:36 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-1.8.2.js"></script>
    
    </head>
    <body>
    
    <%--使用异步操作，表单的form和method都不是必须的，如果指定了，还是会根据后面Jquery的方法和参数来决定--%>
    <form>
    
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text"></td>
            </tr>
    
            <tr>
                <td>密码：</td>
                <td><input type="password"></td>
            </tr>
    
            <tr>
                <td><input type="button" value="检查"></td>
            </tr>
        </table>
        <span id="backData"></span>
    </form>
    
    <script type="text/javascript"> $(":button").click(function () { var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime(); //要传送过去的数据必须是JSON格式的 var sendData = { username: $(":text").val(), password: $(":password").val() }; $.post(url, sendData, function (backData) { //得到返回的数据，填充到相对应的位置 $("#backData").text(backData); }); }); </script>
    
    
    </body>
    </html>

*  Servlet代码：

import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    /** * Created by ozc on 2017/5/21. */
    @WebServlet(name = "UserServlet",urlPatterns = "/UserServlet")
    public class UserServlet extends HttpServlet { 
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
            //设定编码
            request.setCharacterEncoding("UTF-8");
            response.setContentType("text/html;charset=UTF-8");
    
            String username = request.getParameter("username");
            String password = request.getParameter("password");
    
            String backData = "用户名和密码合法";
            if ("哈哈".equals(username) && "123".equals(password)) {
    
                backData = "用户名或密码不合法";
            }
    
            response.getWriter().write(backData);
    
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
            this.doPost(request, response);
    
        }
    }

![这里写图片描述][SouthEast 3]![这里写图片描述][SouthEast 4]

--------------------

## `serialize()` ##

上面在介绍参数的时候已经说了，发送给服务器端的参数是需要JSON格式的，但是呢，**如果我在表单中有很多很多的参数呢？？？那不是要我自己一个一个地去拼接**？？？？

于是乎，**Jquery也提供了serialize()这么一个方法，给我们自动把表单中的数据封装成JSON格式的数据**

使用之前要注意的是：

*  **为每个jQuery对象设置一个name属性，因为name属性会被认为请求参数名**
 *  **必须在`<form>`标签元素之内**

根据上面的例子，我们来使用一下，**我们调用serialize()方法，不自己去拼接JSON**

<%-- Created by IntelliJ IDEA. User: ozc Date: 2017/5/18 Time: 13:36 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-1.8.2.js"></script>
    
    </head>
    <body>
    
    <%--使用异步操作，表单的form和method都不是必须的，如果指定了，还是会根据后面Jquery的方法和参数来决定--%>
    <form>
        <table>
    
    
            <%--要想使用serialize这个方法，就必须在表单之内，并且给上对应的name属性--%>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="username"></td>
            </tr>
    
            <tr>
                <td>密码：</td>
                <td><input type="password" name="password"></td>
            </tr>
    
            <tr>
                <td><input type="button" value="检查"></td>
            </tr>
        </table>
        <span id="backData"></span>
    </form>
    
    <script type="text/javascript"> $(":button").click(function () { var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime(); //要传送过去的数据必须是JSON格式的 /* var sendData = { username: $(":text").val(), password: $(":password").val() };*/ var sendData = $("form").serialize(); $.post(url, sendData, function (backData) { //得到返回的数据，填充到相对应的位置 $("#backData").text(backData); }); }); </script>
    
    
    </body>
    </html>

*  效果：

![这里写图片描述][SouthEast 5]

--------------------

## `$.ajax()` ##

对于这个方法，我们又使用二级联动这个案例来讲解吧。我们曾经使用过JavaScript来解析XML、JSON来实现二级联动。这次我使用**Jquery+Struts2+JSON来实现二级联动。**

$.ajax()这个方法**接收的参数是一个JSON类型**，JSON里面有几个参数：

*  **type【请求类型】**
 *  **url【请求路径】**
 *  **data【发送给服务器的数据，也是一个JSON类型】**
 *  **success【回调函数】**

这里遇到的问题：**动态获取选择下拉框的值时候，调用的是val()而不是text()….**

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>省份-城市，基于jQuery的AJAX二级联动</title>
        <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    </head>
    <body>
    
    <%--############前台页面##############################--%>
    <select name="province" id="provinceId">
        <option>请选择省份</option>
        <option>广东</option>
        <option>北京</option>
    </select>
    <select name="city" id="cityId">
        <option>请选择城市</option>
    </select>
    
    
    <%--############监听省份##############################--%>
    <script type="text/javascript"> $("#provinceId").change( function() { //每次调用的时候，把城市的值清空，除了第一项 $("#cityId option:gt(0)").remove(); //得到具体选择的值，讲道理这里应该是test的，可是test()没反应，要用val() var province = $("#provinceId option:selected").val(); //如果不是“请选择省份”，才触发事件 if ("请选择省份" != province) { //它接收的是一个JSON类型的数据 $.ajax( { type: "POST", url: "${pageContext.request.contextPath}/findCityByProvince?time=" + new Date().getTime(), data: { "province": province}, success: function (backData, aaa, ajax) { //看下服务器带过来的数据是什么样的，然后再对JSON进行解析 //alert(ajax.responseText); //得到服务器返回的数据,是一个JSON格式数据 var array = backData.city; for(var i=0;i<array.length;i++) { //动态创建option节点，添加到城市下拉框中 var $option = $("<option>" + array[i] + "</option>"); $("#cityId").append($option); } } } ); } }); </script>

*  Action

import com.opensymphony.xwork2.ActionSupport;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /** * Created by ozc on 2017/5/18. */
    public class ProvinceAction extends ActionSupport{ 
    
        //自动封装数据
        private String province;
    
        public String getProvince() {
            return province;
        }
        public void setProvince(String province) {
            this.province = province;
        }
    
        //封装城市的集合
        private List<String> city = new ArrayList<>();
        public List<String> getCity() {
            return city;
        }
    
    
        public String findCityByProvince() throws Exception {
    
            if ("广东".equals(province)) {
                city.add("广州");
                city.add("珠海");
                city.add("从化");
            } else if ("北京".equals(province)) {
                city.add("一环");
                city.add("二环");
                city.add("三环");
                city.add("四环");
    
            } else {
                System.out.println("没有你选择的地区");
    
            }
            return "ok";
        }
    
    }

*  Struts.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
    
    <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd">
    
    
    <struts>
       <package name="province" extends="json-default" namespace="/">
    
            <global-results>
                <result name="ok" type="json"></result>
            </global-results>
            <action name="findCityByProvince" class="ProvinceAction" method="findCityByProvince">
            </action>
    
        </package>
    </struts>

*  效果：

![这里写图片描述][SouthEast 6]

--------------------

[SouthEast]: /images/20210827/4253b30463344b78926d398e6546fdcb.png
[SouthEast 1]: /images/20210827/68537a0ecaf846bca967031b6095fd32.png
[SouthEast 2]: /images/20210827/b4baf798853747fcae3f8a56ea24deac.png
[SouthEast 3]: https://img-blog.csdn.net/20170521222304580?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaG9uXzN5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 4]: /images/20210827/323e0b2c9b2a4585aff27f5a2a639e91.png
[SouthEast 5]: /images/20210827/e3431a9a01dc45bebf56d9c7a8b0f2c1.png
[SouthEast 6]: /images/20210827/79bb86fd06c84705b3be69bb3e946250.png