Ajax异步请求struts的JSON机制(省市区三级联动)
1.struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <!--
理论：struts2的插件包，就能将Action中的List转成JSON文本
实战：
》导入struts2-json-plugin-2.3.1.1.jar包到/WEB-INF/lib目录下
》自已的包继承json-default包，且json-default包继承struts-default包
那么自已的包能用到json-default和struts-default这二个包中的功能
》在Action中写一个getXxx()方法返回需要转成JSON字符串的对象
--> <package name="mypackage" extends="json-default" namespace="/"> <!-- 全局结果 -->
<global-results>
<result name="success" type="json"/>
</global-results> <!-- 根据省份查询城市 -->
<action
name="findCityRequest"
class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction"
method="findCityByProvince">
</action> <!-- 根据城市查询区域 -->
<action
name="findAreaRequest"
class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction"
method="findAreaByCity">
</action> </package> </struts>
2.Bean.java
package cn.itcast.javaee.js.provincecityarea; /**
* 实体，封装省份和城市
* @author AdminTC
*/
public class Bean {
private String province;//省份
private String city;//城市
public Bean(){}
public String getProvince() {
return province;
}
public void setProvince(String province) {
this.province = province;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
}
3. Action
package cn.itcast.javaee.js.provincecityarea; import java.util.List;
import com.opensymphony.xwork2.ActionSupport; /**
* 后台控制器*/
public class ProvinceCityAreaAction extends ActionSupport{
//业务层
private ProvinceCityAreaService provinceCityAreaService = new ProvinceCityAreaService();
//Bean是实体，封装省份和城市
private Bean bean;
public Bean getBean() {
return bean;
}
public void setBean(Bean bean) {
this.bean = bean;
}
/**
* 根据省份查询城市
*/
public String findCityByProvince() throws Exception{
cityList = provinceCityAreaService.findCityByProvince(bean.getProvince());
//将List集合转成JSON文本
return SUCCESS;
}
/**
* 根据城市查询区域
*/
public String findAreaByCity() throws Exception{
areaList = provinceCityAreaService.findAreaByCity(bean.getCity());
//将List集合转成JSON文本
return SUCCESS;
} private List<String> cityList;//需要转成JSON的集合，且为其设置值
private List<String> areaList;//需要转成JSON的集合，且为其设置值 public List<String> getCityList() {//插件会调用getXxx()方法来获取需要转成JSON的集合
return cityList;
}
public List<String> getAreaList() {
return areaList;
} }
4.Ajax异步请求
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>省份-城市-区域三级联动</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body> <select id="province">
<option>选择省份</option>
<option>湖南</option>
<option>广东</option>
</select> <select id="city">
<option>选择城市</option>
</select> <select id="area">
<option>选择区域</option>
</select> <!-- 省份--城市 -->
<script type="text/javascript">
//定位"省份"下拉框，同时提交change事件
$("#province").change(function(){
//清空城市下拉框中的内容，除第一项外
$("#city option:gt(0)").remove();
//清空区域下拉框中的内容，除第一项外
$("#area option:gt(0)").remove();
//获取选中的省份
var province = $("#province option:selected").text();
//如果不是"选择省份"的话
if("选择省份" != province){
//异步发送请求到服务器
//参数一：url表示请求的路径
var url = "${pageContext.request.contextPath}/findCityRequest?time="+new Date().getTime();
//参数二：sendData表示以JSON格式发送的数据
var sendData = {
"bean.province" : province
};
//参数三：function(){}处理或回调函数
$.post(url,sendData,function(backData,textStatus,ajax){
//测试
//alert( ajax.responseText );
//测试，backData是一个js对象，cityList是属性
var array = backData.cityList;
//数组的长度
var size = array.length;
//迭代数组
for(var i=0;i<size;i++){
//获取数组中的每个元素
var city = array[i];
//创建option元素
var $option = $("<option>"+city+"</option>");
//将option元素添加到城市下拉框中
$("#city").append( $option );
}
});
}
});
</script> <!-- 城市--区域 -->
<script type="text/javascript">
//定位"城市"下拉框，同时提交change事件
$("#city").change(function(){
//清空区域下拉框中的内容，除第一项外
$("#area option:gt(0)").remove();
//获取选中的城市
var city = $("#city option:selected").text();
//如果不是"选择省份"的话
if("选择城市" != city){
//异步发送请求到服务器
//参数一：url表示请求的路径
var url = "${pageContext.request.contextPath}/findAreaRequest?time="+new Date().getTime();
//参数二：sendData表示以JSON格式发送的数据
var sendData = {
"bean.city" : city
};
//参数三：function(){}处理或回调函数
$.post(url,sendData,function(backData,textStatus,ajax){
//测试
//alert( ajax.responseText );
//测试，backData是一个js对象，cityList是属性
var array = backData.areaList;
//数组的长度
var size = array.length;
//迭代数组
for(var i=0;i<size;i++){
//获取数组中的每个元素
var area = array[i];
//创建option元素
var $option = $("<option>"+area+"</option>");
//将option元素添加到区域下拉框中
$("#area").append( $option );
}
});
}
});
</script> </body>
</html>
Ajax异步请求struts的JSON机制(省市区三级联动)的更多相关文章
- jquery的ajax异步请求接收返回json数据
http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...
- jQuery + json 实现省市区三级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回
作者:ssslinppp 时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...
- MVC&WebForm对照学习：ajax异步请求
写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认 ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
- spring HandlerInterceptorAdapter拦截ajax异步请求，报错ERR_INCOMPLETE_CHUNKED_ENCODING
话不多说,直接上正文. 异常信息: Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING 问题描述: 该异常是在页面发送ajax请 ...
- jquery Ajax异步请求之session
写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...
- AJAX异步请求原理和过程
AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方法. AJAX 基于 JavaS ...
- art.dialog 与 ajax 异步请求
上周写了一些代码,涉及到jquery异步请求,这里归纳总结下,希望对刚接触编程的同学有帮助. 主要习惯使用 art.dialog 框架,非常好用,在异步请求上,它提供了很多简便的方法. 加载使用art ...
随机推荐
- APP 测试 与 WEB 测试的本质区别
单纯从功能测试的层面上来讲的话,APP 测试.web 测试 在流程和功能测试上是没有区别的 根据两者载体不一样,则区别如下: 1.系统结构方面 web项目,b/s架构,基于浏览器的:web测试只要更新 ...
- BZOJ3240 NOI2013矩阵游戏（数论）
必修五题. // luogu-judger-enable-o2 #include<iostream> #include<cstdio> #include<cmath> ...
- matplotlib + pandas绘图
利用pandas处理日期数据,并根据日期绘制增长率曲线. 处理的json文本内容如下: # pd.json [{"name": "A", "date& ...
- Springboot+Thymeleaf框架的button错误
---恢复内容开始--- 在做公司项目时,遇到了一个Springboot+Thymeleaf框架问题: 使用框架写网站时,没有标明type类型的button默认成了‘submit’类型,每次点击按钮都 ...
- 【Cf #449 C】Willem, Chtholly and Seniorious（set维护线段）
这里介绍以个小$trick$,民间流传为$Old Driver Tree$,实质上就是$set$维护线段. 我们将所有连续一段权值相同的序列合并成一条线段,扔到$set$里去,于是$set$里的所有线 ...
- Mac上安装mariadb
1.查看mariadb包信息 # brew info mariadb mariadb: stable 10.2.6 (bottled) Drop-in replacement for MySQL ht ...
- bzoj3926: [Zjoi2015]诸神眷顾的幻想乡 广义后缀自动机模板
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #d ...
- joda-time 2.5 包简化java时间操作
原文:https://www.ibm.com/developerworks/cn/java/j-jodatime.html Joda-Time 简介 既然无法摆脱时间,为何不设法简化时间处理? J P ...
- SIFT算法学习
几个关于SIFT算法的blog,写的很好,链接学习一下 小北的家谈谈SIFT.PCA-SIFT.SURF及我的一点思考http://blog.csdn.net/ijuliet/article/deta ...
- python安装pip、numpy、scipy、statsmodels、pandas、matplotlib等
1.安装python 2.安装numpy(开源的数值计算扩展,可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested list structure)结构要高效的多. 很多库都是以此库为依 ...