AJAX多級下拉聯動【JSON】

時間 2019-11-21

標籤 ajax 多級下拉聯動 JSON 欄目 Ajax 简体版

原文原文鏈接

前言

前面咱們已經使用過了XML做爲數據載體在AJAX中與服務器進行交互。當時候咱們的案例是二級聯動，使用Servlet進行控制javascript

此次咱們使用JSON做爲數據載體在AJAX與服務器交互，使用三級聯動，使用Action進行控制….html

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

分析

與上次是同樣的，只不過此次換了用JSON，使用Action控制罷了…前端

監聽下拉框的變更，使用異步對象與服務器進行交互。java

前臺分析

監聽下拉框的變更
獲得服務器返回的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的開發包ajax

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";
    }
}

返回給前端的時候，數據是這樣子的：json

效果

監聽城市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進行封裝
當選中省份時，把城市和區域的下拉框清空，當選擇城市時，把區域的下拉框清空

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。