AJAX多級下拉聯動【JSON】

阿新 • • 發佈：2019-01-17

前言

前面我們已經使用過了XML作為資料載體在AJAX中與伺服器進行互動。當時候我們的案例是二級聯動，使用Servlet進行控制

這次我們使用JSON作為資料載體在AJAX與伺服器互動，使用三級聯動，使用Action進行控制….

省份-城市-區域三級聯動【Struts2 + JSON版】

分析

與上次是一樣的，只不過這次換了用JSON，使用Action控制罷了…

監聽下拉框的變動，使用非同步物件與伺服器進行互動。

前臺分析

監聽下拉框的變動
得到伺服器返回的JSON資料
使用eval()進行解析，得到具體的物件
使用DOM程式設計把資料填充到對應的下拉框上

後臺分析

得到前臺傳送過來的資料
判斷具體的資料是什麼，給出對應的資料
使用Struts2提供的元件把資料封裝成JSON
返回給瀏覽器

監聽省份JSP頁面


<%--
  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>使用JSON資料載體與伺服器進行互動</title>

      <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>


  <%--############前臺頁面##############################--%>
  <select name="province" id="provinceId">
    <option 
>請選擇省份</option>
    <option>廣東</option>
    <option>北京</option>
  </select>

  <select name="city" id="cityId">
    <option>請選擇城市</option>
  </select>


  <select name="area" id="areaId">
    <option>請選擇區域</option>
  </select>

  <%--############監聽省份##############################--%>
  <script type="text/javascript">

      document.getElementById("provinceId").onchange= function () {

          // 得到選中的下拉框的值
          var provinceValue = this.options[this.selectedIndex].innerHTML;


          /***************ajax程式碼*************************/
          if("請選擇省份" != provinceValue) {

              //每次訪問的時候，都要清空select的值
              var citySelect = document.getElementById("cityId");
              citySelect.options.length = 1;

              var ajax = createAJAX();
              var method = "post";
              var url = "${pageContext.request.contextPath}/province_findCityByProvince?time=" + new Date().getTime();
              ajax.open(method, url);
              ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");

              //顧及到傳送的key、value值有很多，於是我們使用物件吧。
              ajax.send("bean.name=" + provinceValue);

              /***************等待伺服器的響應，得到伺服器返回的資料************************/
              ajax.onreadystatechange = function () {

                  if(ajax.readyState==4) {
                      if(ajax.status==200) {
                        var jsonJava = ajax.responseText;

                        //解析成是JS型別的JSON
                        var json = eval("(" + jsonJava + ")");

                        //得到每個城市的值
                        for(var i=0;i<json.city.length;i++) {
                          var city = json.city[i];

                          //動態建立option控制元件
                          var option = document.createElement("option");
                          option.innerHTML = city;

                          citySelect.appendChild(option);
                        }
                      }
                  }
              };

          }

      };

  </script>

  </body>
</html>

監聽省份Action

要想Struts2能夠把Action的資料封裝成JSON，就需要匯入Struts2的開發包

struts2-json-plugin-2.3.4.1.jar

這裡寫圖片描述

在Action中對應的成員屬性需要給getter方法


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 Bean bean;
    public Bean getBean() {
        return bean;
    }
    public void setBean(Bean bean) {
        this.bean = bean;
    }

    //封裝城市的集合
    private List<String> city = new ArrayList<>();
    public List<String> getCity() {
        return city;
    }

    public String findCityByProvince() throws Exception {

        if ("廣東".equals(bean.getName())) {
            city.add("廣州");
            city.add("珠海");
            city.add("從化");
        } else if ("北京".equals(bean.getName())) {
            city.add("一環");
            city.add("二環");
            city.add("三環");
            city.add("四環");

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

        }
        return "ok";
    }
}

返回給前端的時候，資料是這樣子的：

這裡寫圖片描述

效果

這裡寫圖片描述

監聽城市JSP


  <%--############監聽城市##############################--%>

  <script type="text/javascript">
      document.getElementById("cityId").onchange = function () {

          //清空值
          var areaSelect = document.getElementById("areaId");
          areaSelect.options.length = 1;

          //得到選擇選中的下拉框的值
          var cityValue = this.options[this.selectedIndex].innerHTML;
          if(cityValue!="請選擇城市"){

              var ajax = createAJAX();
              var method = "post";
              var url = "${pageContext.request.contextPath}/province_findAreaByCity?time=" + new Date().getTime();
              ajax.open(method, url);
              ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");

              //顧及到傳送的key、value值有很多，於是我們使用物件吧。
              ajax.send("bean.name=" + cityValue);

              /***************等待伺服器的響應，得到伺服器返回的資料************************/
              ajax.onreadystatechange = function () {

                  if(ajax.readyState==4) {
                      if(ajax.status==200) {

                          var jsonJava = ajax.responseText;

                          var json = eval("(" + jsonJava + ")");

                          //得到每個地區的值
                          for(var i=0;i<json.area.length;i++) {
                              var area = json.area[i];

                              //動態建立option控制元件
                              var option = document.createElement("option");
                              option.innerHTML = area;

                              areaSelect.appendChild(option);
                          }

                      }
                  }
              }

          };
      };

  </script>

Action頁面


    public String findAreaByCity() throws Exception {

        if ("廣州".equals(bean.getName())) {
            area.add("白雲區");
            area.add("黃浦區");
            area.add("蘿崗區");
        } else if ("珠海".equals(bean.getName())) {
            area.add("香江");
            area.add("拱北");
            area.add("EE");
            area.add("xx");
        } else {
            System.out.println("沒有你選擇的地區");

        }
        return "ok";
    }

最終效果：

這裡寫圖片描述

總結

這次使用的是JSON作為資料載體與伺服器進行互動，和XML本質上是沒有區別的。

只不過JSON是更加輕量級文字資料，在JavaScript能夠方便地獲取返回的資料

在Struts2中把Action資料封裝成JSON格式，返回給非同步物件
- 需要匯入jar包
- 在配置檔案中配置繼承json包
- 返回的型別是json
如果使用POST時，傳送的key、vaulue太多的話，我們可以使用bean進行封裝
當選中省份時，把城市和區域的下拉框清空，當選擇城市時，把區域的下拉框清空

AJAX多級下拉聯動【JSON】

前言前面我們已經使用過了XML作為資料載體在AJAX中與伺服器進行互動。當時候我們的案例是二級聯動，使用Servlet進行控制這次我們使用JSON作為資料載體在AJAX與伺服器互動，使用三級聯動，使用Action進行控制…. 省份-城市-區域三級聯動

Ajax案例-基於XML，以POST方式，完成省份-城市二級下拉聯動

<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head&g

移動端自定義下拉框【H5+js+css】

var weekdayArr = ['男', '女'];// var age1 = ['18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '3

JavaScript解析Json實現動態修改多級下拉選擇列表控制元件Select

最終效果：根據上級選單所選，決定下級選單的列表項內容: 資料來源首先讀取資料庫中的資料得到資料，由於資料庫中的資料是分散的幾個二維表格，查詢出來的資料是Map鍵值對的List集合，不能直

Excel多級下拉選單聯動自動匹配內容

4.一級下選單引用的是第一行的資料，我們對一級下拉選單進行定義。選中第一行的資料，點選選單欄中的【定義名稱】，在輸入區域名稱這裡輸入名稱，例如“首行”，然後點選確定。可以看到在名稱管理器裡多了一個名稱“首行”。

Ajax實現省份-城市二級下拉聯動

基於XML，以POST方式，完成省份-城市二級下拉聯動資料庫 mysql，表：t_city JavaWeb專案，使用servlet ajax.js// 建立AJAX非同步物件 function createAJAX() { var ajax = null; if

【jquery】通過【ajax】獲取資料並轉換成【Json】

頁面程式碼：<head runat="server"> <title></title> <script src="jquery-1.4.2.min.js" type="text/javascript"><

【JSON】Newtonsoft的用法和原理

AS 網上 style model ret 控制顯示 () .json 老忘記用法，所以這裏記一下，方便以後查找： 1.將DataSet轉成Json public string GetList() { string

layui下拉聯動

IT spa UNC func _id 下拉 park span path layui下寫入監聽， searchPname 是第一個下拉框 searchParkingname 是第二個下拉框 form.on(‘select(searchPname)

SpringMVC之ajax+select下拉框交互常用方式

ret val hash In new type dex chain ucc <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert

DBLookupCombobox實現下拉聯動

nbsp image 數據 text 打開分享圖片 style cluster open 這次用DBLookupCombobox實現省份-城市-地區的下拉聯動，用以學習DBLookupCombobox的一些用法效果圖：首先建立數據表（數據表形式可以多種多樣：數據庫表

LeetCode：下一個排列【31】

-- 技術分享 wid 必須 targe col int close ace LeetCode：下一個排列【31】題目描述實現獲取下一個排列的函數，算法需要將給定數字序列重新排列成字典序中下一個更大的排列。如果不存在下一個更大的排列，則將數字重新排列成最小的排列（即升

多級下拉列表預設觸發下拉事件載入資料

jQuery.get("./getProvinceList",{},function(data){ console.log(); var list = data.data.list; var html = "<option value='0

Mac下python+selenium【1】環境搭建

寫在最前面：搞自動化測試呢有很大概率會用到selenium，其實用什麼語言都可以，這次先從python講起。其實在win下我已經用了很久了，今天講講Mac下的安裝。首先是環境搭建，本文基於macOS Mojave作業系統，我用的是python3.6+pycharm，這個就不介紹了，然

Mac下python+selenium【2】獲取表格所有元素

寫在最前面：一點selenium自動化測試的常用技巧介紹，小白專用。我郵的研究生網站上的一個table，想要把所有的資訊扒下來，怎麼處理呢？ <tr height="19"> <td style="border-bottom:#0

JS--jQuery實現的多級下拉選單效果程式碼

這篇文章主要介紹了jQuery實現的多級下拉選單效果程式碼,涉及jquery滑鼠事件及頁面元素的顯示與隱藏效果實現技巧,非常具有實用價值,需要的朋友可以參考下: 本文例項講述了jQuery實現的多級下拉選單效果程式碼。供大家參考。具體如下：這是一款jQuery多級下拉選單，在支援html5

jqGrid----下拉列表框下拉聯動，dataEvents回撥函式。

1.給單元格添onchange事件例項： $('#gridYosan').setColProp('yosanka', {editoptions: { dataEvents:[{ type: 'change', fn: fun

asp.net mvc 使用Ajax呼叫Action 返回資料【轉】

使用asp.net mvc 呼叫Action方法很簡單。一、無引數方法。 1、首先，引入jquery-1.5.1.min.js 指令碼，根據版本不同大家自行選擇。 <script src="@Url.Content("~/

easyui-combobox 下拉列表的JSON獲取資料例子

1. 使用easyui需要匯入的包： <script type="text/javascript" src="js/easyui/jquery.min.js"></script> <link rel="stylesheet" type="tex

ajax 迴圈下拉列表及預設選擇

$.ajax({ url:"getData.asp", success:function(yData){ var sData = unescape(yData); var gData

AJAX多級下拉聯動【JSON】

前言

分析

前臺分析

後臺分析

監聽省份JSP頁面

監聽省份Action

效果

監聽城市JSP

Action頁面

最終效果：

總結

相關推薦