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 ...
随机推荐
- Java多线程(二) —— 深入剖析ThreadLocal
对Java多线程中的ThreadLocal类还不是很了解,所以在此总结一下. 主要参考了http://www.cnblogs.com/dolphin0520/p/3920407.html 中的文章. ...
- get方式传递的数组
- BZOJ5092 分割序列（贪心）
设si为该序列的异或前缀和,则显然相当于求Σmax{sj+sj^si} (i=1~n,j=0~i).从高位到低位考虑,如果该位si为1,无论sj怎么填都是一样的:如果该位si为0,则sj该位应尽量为1 ...
- P4417 [COCI2006-2007#2] STOL
题目描述 米尔科买了一套别墅,他想要邀请尽量多的人和他一起庆祝.他需要一张大的木质矩形桌子来让他和他的嘉宾坐下.每张桌子可容纳的人数等于它的周长(四边长度的总和).米尔科想要买一张即可在他的公寓里放下 ...
- hihocoder1639 图书馆 [数学]
已知数组a[]及其和sum, 求sum! / (a1!a2!...an!) 的个位数的值. 求某数的逆元表写成了求某数阶乘的逆元表,故一直没找到错误. P 是质数的幂B 表示质数,P 表示模数,cal ...
- R1 学习记录
libevent框架学习特点: 1.可移植行,跨平台的 2.速度快,libevent会用各平台最快的非阻塞IO函数 3.扩展性 4.方便性构成: 1.evutil: 抽象出各平台network的函数 ...
- [BZOJ1500][NOI2005]维修数列 解题报告 Splay
Portal Gun:[BZOJ1500][NOI2005]维修数列 有一段时间没写博客了,最近在刚数据结构......各种板子背得简直要起飞,题目也是一大堆做不完,这里就挑一道平衡树的题来写写好了 ...
- Alpha 冲刺 —— 十分之四
队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助前后端接口的开发 测试项目运行的服务器环 ...
- BZOJ3112 [Zjoi2013]防守战线 【单纯形】
题目链接 BZOJ3112 题解 同志愿者招募 费用流神题 单纯形裸题 \(BZOJ\)可过 洛谷被卡.. #include<algorithm> #include<iostream ...
- python的字符串截取
str = ‘’ :] #截取第一位到第三位的字符 print str[:] #截取字符串的全部字符 :] #截取第七个字符到结尾 ] #截取从头开始到倒数第三个字符之前 ] #截取第三个字符 ] # ...