Jquery就是這么簡單

什么是Jquery？

Jquey就是一款跨主流瀏覽器的JavaScript庫，簡化JavaScript對HTML操作

就是封裝了JavaScript，能夠簡化我們寫代碼的一個JavaScript庫

為什么要使用Jquery？

我覺得非常重要的理由就是：它能夠兼容市面上主流的瀏覽器，我們學(xué)習(xí)AJAX就知道了，IE和FireFox獲取異步對象的方式是不一樣的，而Jquery能夠屏蔽掉這些不兼容的東西...

  • （1）寫少代碼,做多事情【write less do more】
  • （2）免費，開源且輕量級的js庫，容量很小
  • 注意：項目中，提倡引用min版的js庫
  • （3）兼容市面上主流瀏覽器，例如 IE，F(xiàn)irefox，Chrome
  • 注意：jQuery不是將所有JS全部封裝，只是有選擇的封裝
  • （4）能夠處理HTML/JSP/XML、CSS、DOM、事件、實現(xiàn)動畫效果，也能提供異步AJAX功能
  • （5）文檔手冊很全，很詳細(xì)
  • （6）成熟的插件可供選擇
  • （7）提倡對主要的html標(biāo)簽提供一個id屬性，但不是必須的
  • （8）出錯后，有一定的提示信息
  • （9）不用再在html里面通過<script>標(biāo)簽插入一大堆js來調(diào)用命令了

回顧javascript

JavaScript定位到HTML的控件有三種基本的方式：

  • （A）通過ID屬性：document.getElementById()
  • （B）通過NAME屬性：document.getElementsByName()
  • （C）通過標(biāo)簽名：document.getElementsByTagName()

我們發(fā)現(xiàn)，JavaScript的方法名太長了，不易于書寫代碼......

封裝優(yōu)化

這些方法名太長了，獲取ID屬性、NAME屬性、標(biāo)簽名屬性的控件也用不著三個方法，我們定義下規(guī)則就好了

  • 傳入的參數(shù)是"#"號開頭的字符串，那么就是id屬性
  • 傳入的參數(shù)是沒有"#"號開頭的字符串，也沒有前綴修飾的字符串就是標(biāo)簽名屬性

到這里，我們就可以根據(jù)傳入的參數(shù)判斷它是獲取ID屬性的控件還是標(biāo)簽名的控件了。在內(nèi)部還是調(diào)用document.getElementById()這些方法。我們真正在使用的時候直接寫上我們自定義規(guī)則的字符串就可以獲取對應(yīng)的控件了。


    <script type="text/javascript">
        //$()表示定位指定的標(biāo)簽
        function $(str){
            //獲取str變量的類型
            var type = typeof(str);
            //如果是string類型的話
            if(type == "string"){
                //截取字符串的第一個字符
                var first = str.substring(0,1);
                //如果是#號的話
                if("#" == first){
                    //獲取#號之后的所有字符串
                    var end = str.substring(1,str.length);
                    //根據(jù)id定位標(biāo)簽
                    var element = document.getElementById(end);
                    //如果找到了
                    if(element != null){
                        //返回標(biāo)簽
                        return element;
                    }else{
                        alert("查無此標(biāo)簽");
                    }
                }else{

                }
            }else{
                alert("參數(shù)必須是字符串類型");
            }
        }
    </script>

JQuery對象與JavaScript對象之間的關(guān)系

  • 用JavaScript語法創(chuàng)建的對象叫做JavaScript對象
  • 用JQurey語法創(chuàng)建的對象叫做JQuery對象
    • Jquery對象只能調(diào)用Jquery對象的API
    • JavaScript對象只能調(diào)用JavaScript對象的API
這里寫圖片描述

JQuery對象與JavaScript對象是可以互相轉(zhuǎn)化的，一般地，由于Jquery用起來更加方便，我們都是將JavaScript對象轉(zhuǎn)化成Jquery對象

Jquery轉(zhuǎn)成JavaScript對象

在Jquery中對象都是當(dāng)成是數(shù)組的。因此Jquery轉(zhuǎn)成JavaScript對象語法如下：獲取數(shù)組的下標(biāo)，出來的結(jié)果就是JavaScript對象了。

  • jQuery對象[下標(biāo)，從0開始]
  • jQuery對象.get(下標(biāo)，從0開始)

再次重申：Jquery對象只能調(diào)用Jquery對象的API，JavaScript對象只能調(diào)用JavaScript對象的API

JavaScript對象轉(zhuǎn)成Jquery

值得注意的是：在JavaScript腳本內(nèi)，this是代表JavaScript對象的。

JavaScript對象轉(zhuǎn)成Jquery對象語法也非常簡單：在$內(nèi)寫上JavaScript對象，就變成了JQuery對象了。

  • 語法：$(js對象)---->jQuery對象

一般地，我們習(xí)慣在Jquery對象的變量前面寫上$，表示這是JQuery對象\

選擇器

Jquery提供了九個選擇器給我們用來定位HTML控件..

  • 目的：通過九類選擇器，能定位web頁面（HTML/JSP/XML）中的任何標(biāo)簽
    • （1）基本選擇器
      • 直接定位id、類修修飾器、標(biāo)簽
    • （2）層次選擇器
      • 有父子，兄弟關(guān)系的標(biāo)簽
    • （3）增強基本選擇器
      • 大于、小于、等于、奇偶數(shù)的標(biāo)簽
    • （4）內(nèi)容選擇器
      • 定義內(nèi)容為XXX、內(nèi)容中是否有標(biāo)簽器、含有子元素或者文本的標(biāo)簽
    • （5）可見性選擇器
      • 可見或不可見的標(biāo)簽
    • （6）屬性選擇器
      • 與屬性的值相關(guān)
    • （7）子元素選擇器
      • 匹配父標(biāo)簽下的子標(biāo)簽
    • （8）表單選擇器
      • 匹配表單對應(yīng)的控件屬性
    • （9）表單對象屬性選擇器
      • 匹配表單屬性具體的值

通過這九種的選擇器，我們基本可以能獲取HTML中任何位置的標(biāo)簽。

這里寫圖片描述

Jquery關(guān)于DOM的API

前面使用Jquery的選擇器來獲取到了HTML標(biāo)簽，單純得到標(biāo)簽是沒有用的。我們要對其進(jìn)行增刪改，這樣在網(wǎng)頁上才能做出“動態(tài)”的效果...

JavaScript的DOM能夠操作CSS,HTML從而在網(wǎng)頁上做出動態(tài)的效果..

這里寫圖片描述

Jquery是對JavaScript的封裝，那么Jquery在得到HTML標(biāo)簽后，也有對應(yīng)的方法來獲取標(biāo)簽的內(nèi)容，動態(tài)創(chuàng)建、刪除、修改標(biāo)簽。從而在網(wǎng)頁上做出動態(tài)的效果

追加

  • append()：追加到父元素之后
  • prepend()：追加到父元素之前
  • after()：追加到兄弟元素之后
  • before()：追加到兄弟元素之前

查詢層次關(guān)系

我們發(fā)現(xiàn)在選擇器上就有層次關(guān)系的選擇器，在API上也有層次關(guān)系的方法。一般地，我們用方法來定位到對應(yīng)的控件比較多。

  • children()：只查詢子節(jié)點，不含后代節(jié)點
  • next()：下一下兄弟節(jié)點
  • prev()：上一下兄弟節(jié)點
  • siblings()：上下兄弟節(jié)點

css樣式

  • addClass()：增加已存在的樣式
  • removeClass()：刪除已存在的樣式
  • hasClass()：判斷標(biāo)簽是否有指定的樣式，true表示有樣式，false表示無樣式
  • toggleClass()：如果標(biāo)簽有樣式就刪除，否則增加樣式

動畫效果

往這些方法下設(shè)置參數(shù)，那么就可以控制它的隱藏、顯示時間

  • show()：顯示對象
  • hide()：隱藏對象
  • fadeIn()：淡入顯示對象
  • fadeOut()：淡出隱藏對象
  • slideUp()：向上滑動
  • slideDown()：向下滑動
  • slideToggle()：上下切換滑動，速度快點

CSS尺寸屬性

直接調(diào)用無參就是獲取，給指定的參數(shù)就是修改

  • offset()：獲取對象的left和top坐標(biāo)
  • offset({top:100,left:200})：將對象直接定位到指定的left和top坐標(biāo)
  • width()：獲取對象的寬
    • width(300)：設(shè)置對象的寬
  • height()：獲取對象的高
    • height(500)：設(shè)置對象的高

標(biāo)簽內(nèi)容和屬性

  • val()：獲取value屬性的值
    • val("")：設(shè)置value屬性值為""空串，相當(dāng)于清空
  • text()：獲取HTML或XML標(biāo)簽之間的值
    • text("")：設(shè)置HTML或XML標(biāo)簽之間的值為""空串
  • html()：得到標(biāo)簽下HTML的值
  • **attr(name,value)：給符合條件的標(biāo)簽添加key-value屬性對 **
  • removeAttr()：刪除已存在的屬性

增刪改標(biāo)簽

  • **$("<div id='xxID'>HTML代碼</div>")：創(chuàng)建元素，屬性，文本 **
  • remove()：刪除自已及其后代節(jié)點
  • clone()：只復(fù)制樣式，不復(fù)制行為
  • clone(true)：既復(fù)制樣式，又復(fù)制行為
  • replaceWith()：替代原來的節(jié)點

迭代

由于Jquery對象都是被看成是一個數(shù)組，each()方法就是專門用來操作數(shù)組的。

  • each()：是jQuery中專用于迭代數(shù)組的方法，參數(shù)為一個處理函數(shù)，this表示當(dāng)前需要迭代的js對象

Jquery事件API

JavaScript一大特性就是事件驅(qū)動，當(dāng)用戶用了執(zhí)行了某些動作以后，JavaScript就會響應(yīng)事件，在事件的方法上，我們就可以對用戶的動作“回饋”一些信息給用戶！

Jquery也對JavaScript事件進(jìn)行了封裝，我們看一下以下的API：

  • window.onload：在瀏覽器加載web頁面時觸發(fā)，可以寫多次onload事件，但后者覆蓋前者
  • ready：在瀏覽器加載web頁面時觸發(fā)，可以寫多次ready事件，不會后者覆蓋前者，依次從上向下執(zhí)行，我們常用$(函數(shù))簡化
    • ready和onload同時存在時，二者都會觸發(fā)執(zhí)行，ready快于onload
  • change：當(dāng)內(nèi)容改變時觸發(fā)
  • focus：焦點獲取
  • select：選中所有的文本值
  • keyup/keydown/keypress：演示在IE和Firefox中獲取event對象的不同
  • mousemove：在指定區(qū)域中不斷移動觸發(fā)
  • mouseover：鼠標(biāo)移入時觸發(fā)
  • mouseout：鼠標(biāo)移出時觸發(fā)
  • submit：在提交表單時觸發(fā)，true表示提交到后臺，false表示不提交到后臺
  • click：單擊觸發(fā)
  • dblclick：雙擊觸發(fā)
  • blur：焦點失去

值得注意的是：當(dāng)用戶執(zhí)行動作的時候，瀏覽器會自動創(chuàng)建事件對象，傳遞進(jìn)去給響應(yīng)事件的方法【類似與監(jiān)聽器的原理】，那么我們在響應(yīng)方法上就可以獲取一些屬性：

這里寫圖片描述

Jquery對ajax常用的API

我們在開始使用JavaScript學(xué)習(xí)AJAX的時候，創(chuàng)建異步對象時，需要根據(jù)不同的瀏覽器來創(chuàng)建不同的對象....裝載XML文件的時候，也有兼容性的問題。

Jquery就很好地屏蔽了瀏覽器不同的問題，不需要考慮瀏覽器兼容的問題，這是非常非常方便我們開發(fā)的。

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

前4個方法的功能都是差不多的，都是向服務(wù)器發(fā)送請求，得到服務(wù)器返回的數(shù)據(jù)。

最后一個是對表單的數(shù)據(jù)進(jìn)行封裝，將表單的數(shù)據(jù)封裝成JSON格式

load()

首先，我們來使用一下load()這個方法吧。在文檔中對它的解釋是這樣子的。

這里寫圖片描述

我來補充一下：

  • 第一個參數(shù)：表示的是要請求的路徑
  • 第二個參數(shù)：要把哪些參數(shù)帶過去給服務(wù)器端，需要的是JSON格式的
  • 第三個參數(shù)：回調(diào)方法，服務(wù)器返回給異步對象的時候，會調(diào)用該方法

回調(diào)方法也有三個參數(shù)：

  • 回調(diào)函數(shù)中參數(shù)一：backData表示返回的數(shù)據(jù)，它是js對象
  • 回調(diào)函數(shù)中參數(shù)二：textStatus表示返回狀態(tài)的文本描述，例如：success，error，
  • 回調(diào)函數(shù)中參數(shù)三：xmlHttpRequest表示ajax中的核心對象

一般地，我們只需要用到第一個參數(shù)！

我們來使用這個方法來獲取當(dāng)前的時間，對這個方法熟悉一下：

調(diào)用load方法的jquery對象，返回結(jié)果自動添加到j(luò)Query對象代表的標(biāo)簽中間

  • 如果帶參數(shù)就自動使用post，不帶參數(shù)自動使用get。
  • 使用load方法時，自動進(jìn)行編碼，無需手工編碼

<%--
  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>
  當(dāng)前時間是：<span id="time"></span><br>
  <input type="button" id="button" value="獲取當(dāng)前時間">

  <script type="text/javascript">

    $("#button").click(function () {

      //請求服務(wù)器端的路徑
      var url = "${pageContext.request.contextPath}/TimeServlet?time?" + new Date().getTime();

      //沒有要參數(shù)要帶過去
      //var sendData = null;

      /*
       * function方法的三個參數(shù)：   
           * 第一個參數(shù)表示服務(wù)器端帶回來的數(shù)據(jù)，是JS對象
           * 第二個參數(shù)表示的是返回狀態(tài)的文字描述【用處不大】
           * 第三個參數(shù)表示的是異步對象，一般我們用來看服務(wù)器端返回的JSON的值是什么【用處還行】
           *       因為第一個參數(shù)返回的是JS對象，因此我們是看不見具體JSON的值是什么，所以有的時候要用第三個參數(shù)
       *
       * 值得注意的是：
       *       要想使用第三個參數(shù)，就必須把前兩個參數(shù)給寫上！
       *       調(diào)用load方法的jquery對象，返回結(jié)果自動添加到j(luò)Query對象代表的標(biāo)簽中間
       * */
      $("#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();

    }
  • 效果：
這里寫圖片描述

$.get()

上面的load()方法，當(dāng)我們帶參數(shù)給服務(wù)器的時候，就自動轉(zhuǎn)化成post、不帶參數(shù)的時候就轉(zhuǎn)換成get。$.get()就是指定是get方法

load()方法是使用Jquery對象來調(diào)用的，并且調(diào)用過后，會把數(shù)據(jù)自動填充到Jquery對象的標(biāo)簽中間，而$.get()并不是特定的Jquery對象來調(diào)用！

$.get(url, [data], [fn], [type])參數(shù)和load()是完全類似的，我們在上面的例子中該一下就行了。

由于$.get()是沒有將返回的數(shù)據(jù)自動填充到標(biāo)簽之中，因此需要手動地添加到指定的標(biāo)簽之中！


      $.get(url, function (backData) {

        //得到客戶端返回的數(shù)據(jù)【JS對象】

        $("#time").append(backData);
      });
  • 效果：
這里寫圖片描述

$.post()

.post()和.get()是十分類似的，只不過是把請求方式改變了，一般情況下，我們有參數(shù)傳遞給服務(wù)器的時候，都是用post方式的。

使用$.post()方法是需要設(shè)定編碼的，它和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都不是必須的，如果指定了，還是會根據(jù)后面Jquery的方法和參數(shù)來決定--%>
<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();

        //要傳送過去的數(shù)據(jù)必須是JSON格式的
        var sendData = {
            username: $(":text").val(),
            password: $(":password").val()
        };

        $.post(url, sendData, function (backData) {

            //得到返回的數(shù)據(jù)，填充到相對應(yīng)的位置
            $("#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 {

        //設(shè)定編碼
        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);

    }
}
這里寫圖片描述
這里寫圖片描述

serialize()

上面在介紹參數(shù)的時候已經(jīng)說了，發(fā)送給服務(wù)器端的參數(shù)是需要JSON格式的，但是呢，如果我在表單中有很多很多的參數(shù)呢？？？那不是要我自己一個一個地去拼接？？？？

于是乎，Jquery也提供了serialize()這么一個方法，給我們自動把表單中的數(shù)據(jù)封裝成JSON格式的數(shù)據(jù)

使用之前要注意的是：

  • 為每個jQuery對象設(shè)置一個name屬性，因為name屬性會被認(rèn)為請求參數(shù)名
  • 必須在<form>標(biāo)簽元素之內(nèi)

根據(jù)上面的例子，我們來使用一下，我們調(diào)用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都不是必須的，如果指定了，還是會根據(jù)后面Jquery的方法和參數(shù)來決定--%>
<form>
    <table>

        <%--要想使用serialize這個方法，就必須在表單之內(nèi)，并且給上對應(yīng)的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();

        //要傳送過去的數(shù)據(jù)必須是JSON格式的
/*        var sendData = {
            username: $(":text").val(),
            password: $(":password").val()
        };*/

        var sendData = $("form").serialize();
        $.post(url, sendData, function (backData) {

            //得到返回的數(shù)據(jù)，填充到相對應(yīng)的位置
            $("#backData").text(backData);

        });

    });

</script>

</body>
</html>
  • 效果：
這里寫圖片描述

$.ajax()

對于這個方法，我們又使用二級聯(lián)動這個案例來講解吧。我們曾經(jīng)使用過JavaScript來解析XML、JSON來實現(xiàn)二級聯(lián)動。這次我使用Jquery+Struts2+JSON來實現(xiàn)二級聯(lián)動。

$.ajax()這個方法接收的參數(shù)是一個JSON類型，JSON里面有幾個參數(shù)：

  • type【請求類型】
  • url【請求路徑】
  • data【發(fā)送給服務(wù)器的數(shù)據(jù)，也是一個JSON類型】
  • success【回調(diào)函數(shù)】

這里遇到的問題：動態(tài)獲取選擇下拉框的值時候，調(diào)用的是val()而不是text()....


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>省份-城市，基于jQuery的AJAX二級聯(lián)動</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>

<%--############監(jiān)聽省份##############################--%>
<script type="text/javascript">
    $("#provinceId").change( function() {

        //每次調(diào)用的時候，把城市的值清空，除了第一項
        $("#cityId option:gt(0)").remove();

        //得到具體選擇的值，講道理這里應(yīng)該是test的，可是test()沒反應(yīng)，要用val()
        var province = $("#provinceId option:selected").val();

        //如果不是“請選擇省份”，才觸發(fā)事件
        if ("請選擇省份" != province) {

            //它接收的是一個JSON類型的數(shù)據(jù)
            $.ajax(
                    {
                        type: "POST",
                        url: "${pageContext.request.contextPath}/findCityByProvince?time=" + new Date().getTime(),
                        data: {"province": province},
                        success: function (backData, aaa, ajax) {

                            //看下服務(wù)器帶過來的數(shù)據(jù)是什么樣的，然后再對JSON進(jìn)行解析
                            //alert(ajax.responseText);

                            //得到服務(wù)器返回的數(shù)據(jù),是一個JSON格式數(shù)據(jù)
                            var array = backData.city;
                            for(var i=0;i<array.length;i++) {

                                //動態(tài)創(chuàng)建option節(jié)點，添加到城市下拉框中
                                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{

    //自動封裝數(shù)據(jù)
    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("一環(huán)");
            city.add("二環(huán)");
            city.add("三環(huán)");
            city.add("四環(huán)");

        } else {
            System.out.println("沒有你選擇的地區(qū)");

        }
        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>
  • 效果：
這里寫圖片描述

總結(jié)

  • load()方法是使用Jquery的對象來進(jìn)行調(diào)用的，得到服務(wù)器的結(jié)果自動會把結(jié)果嵌套到所在的標(biāo)簽中。
  • get()方法不是使用Jquery對象來調(diào)用，因此需要手動把結(jié)果放在想要放的位置
  • post()方法是用來把參數(shù)帶過去給服務(wù)器的，因此我們需要在Servlet上手動設(shè)置編碼。用法與get()方法一樣
  • serialize()是非常好用的一個方法，不需要我們手動去拼接參數(shù)，會自動把form表單的參數(shù)封裝成JSON格式的數(shù)據(jù)。
  • 至于$.ajax()方法，實際上就是集合了get()和post()方法。
image
image

如果文章有錯的地方歡迎指正，大家互相交流。習(xí)慣在微信看技術(shù)文章，想要獲取更多的Java資源的同學(xué)，可以關(guān)注微信公眾號:Java3y

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、樣式篇 第1章 初識jQuery （1）環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,670評論 0贊 44
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,568評論 19贊 139
  • 仔細(xì)想一下17年可能是經(jīng)歷比較豐富的一年了。 寒假和高中同學(xué)第一次去滑雪真的真的很好玩 想今年寒假的時候和男票再一...
    老污男的貓閱讀 311評論 0贊 2

友情鏈接更多精彩內(nèi)容