AJAX多级下拉联动【JSON】
前言
前面我们已经使用过了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】的更多相关文章
- AJAX二级下拉联动【XML方式】
AJAX二级下拉联动案例 我们在购物的时候,常常需要我们来选择自己的收货地址,先选择省份,再选择城市- 有没有发现:当我们选择完省份的时候,出现的城市全部都是根据省份来给我们选择的.这是怎么做到的呢? ...
- java 移动开发获取多级下拉框json数据的类和mobile-select-area插件
我这里以行政区划做例子 //这个类是把数据库中的行政区划转化为json格式的data @SuppressWarnings("rawtypes")public class XzqhL ...
- struts ajax多级下拉菜单
先看项目截图: 看看要加入的jar包 除了struts核心的那个几个之外,我们还需要这两个 OK先看struts.xml <?xml version="1.0" encodi ...
- 菜鸟学Java（七）——Ajax+Servlet实现无刷新下拉联动
下拉联动的功能可以说非常的常用,例如在选择省.市等信息的时候:或者在选择大类.小类的时候.总之,下拉联动很常用.今天就跟大家分享一个简单的二级下拉联动的功能. 大类下拉框:页面加载的时候就初始化大类的 ...
- Jquery Json 下拉联动
#region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summary> /// <p ...
- Ajax jQuery下拉框联动案例
需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...
- Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...
- avalon.js 多级下拉框实现
学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...
- jquery实现多级下拉菜单
支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...
随机推荐
- python 项目中的 requirements.txt
背景 java项目的话,包依赖一般都是maven管理,当然还有gradle,对于包的管理非常方便,maven的话只要在pom.xml中添加依赖包的maven坐标就可以了的,那python呢 ? 解决方 ...
- 【Git】自动化Maven项目构建脚本（一）
在公司服务器上搭了个自动化构建环境,一上午写了个构建脚本,现在贴出来给自己看 #!/bin/bash # .配置路径变量 propath=/home/hotspot/.autoBuild/projec ...
- C语言 入门程序
#include "stdio.h" #include "stdlib.h" #include "string.h" #define MAX ...
- React渲染问题研究以及Immutable的应用
写在前面 这里主要介绍自己在React开发中的一些总结,关于react的渲染问题的一点研究. 另外本人一直希望在React项目中尝试使用,因此在之前已经介绍过immutable的API,可以参看这里I ...
- Servlet使用简介
Servlet的使用基本包含三个步骤: 1.继承HttpServlet 或实现Servlet 接口 (根据源码分析最终都是对servlet接口的实现) 2.配置地址: 配置web.xml 或者用注解的 ...
- jquery 的 each 方法中 return 的坑
jquery 的 each 方法中 return 的坑 Chapter 0 在项目中使用 jquery 的 each 方法时想在 each 的循环中返回一个布尔类型的值于是掉进一个坑中... Chap ...
- TTL转MIPI DSI芯片方案TC358778XBG
型号:TC358778XBG功能:TTL转MIPI DSI通信方式:IIC分辨率:1920*1080电源:3.3/1.8/1.2封装形式:BGA80深圳长期现货 ,提供技术支持,样品申请及规格书请联系 ...
- ASP.NET Core MVC I/O编程模型
1. ASP.NET Core MVC I/O编程模型 1.1. I/O编程模型浅析 1.2. 同步阻塞I/O 1.3. 同步非阻塞I/O 1.4. 异步I/O 1.5. 总结 1.1. I/O编程模 ...
- lucene&solr-day1
全文检索课程 Lucene&Solr(1) 1. 计划 第一天:Lucene的基础知识 1.案例分析:什么是全文检索,如何实现全文检索 2.Lucene实现全文检索的流程 a) ...
- 重写equals就必须重写hashCode的原理分析
因为最近在整理Java集合的源码, 所以今天再来谈谈这个古老的话题,因为后面讲HashMap会用到这个知识点, 所以重新梳理下. 如果不被重写(原生Object)的hashCode和equals是什么 ...