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 ...
随机推荐
- Hadoop 2.6.0 HIVE 2.1.1配置
我用的hadoop 是2.6.0 版本 ,hive 是 2.1.1版本进入:/home/zkpk/apache-hive-2.1.1-bin/执行hive 后报错: (1)Exception in t ...
- delphi ERP框架
之前做c/s架构,接了有家装饰的一个ERP项目,做了一个ERP框架,现在转后端开发了,这些东西还是蛮怀念的,就开源出来吧,有需要的同学可以参考. https://github.com/qianlnk/ ...
- web接口测试中需要测试的几个点
本文导读: web接口测试用例要包括欲测试的功能.应输入的数据和预期的输出结果,只有在数据能正确流入.流出模块的前提下,其他测试才有意义.下面介绍在web测试接口时一些需要注意的点 1.接口返回 数据 ...
- [BZOJ2055]80人环游世界 有上下界最小费用最大流
2055: 80人环游世界 Time Limit: 10 Sec Memory Limit: 64 MB Description 想必大家都看过成龙大哥的<80天环游世界>,里面 ...
- Android性能优化：手把手带你全面了解 内存泄露 & 解决方案
. 简介 即 ML (Memory Leak)指 程序在申请内存后,当该内存不需再使用 但 却无法被释放 & 归还给 程序的现象2. 对应用程序的影响 容易使得应用程序发生内存溢出,即 OOM ...
- Letter Combinations of a Phone Number - LeetCode
目录 题目链接 注意点 解法 小结 题目链接 Letter Combinations of a Phone Number - LeetCode 注意点 可以不用按字典序排序 解法 解法一:输入的数字逐 ...
- 【模板】exBSGS/Spoj3105 Mod
[模板]exBSGS/Spoj3105 Mod 题目描述 已知数\(a,p,b\),求满足\(a^x\equiv b \pmod p\)的最小自然数\(x\). 输入输出格式 输入格式: 每个测试文件 ...
- 单点登录(四)-----遇到问题-----cas server 源码部署tomcat运行报错ClassNotFoundException: org.jasig.cas.CasEnvironmentCo
情况 cas单点登录 cas server 源码部署tomcat运行报错 把cas server的代码下载下来后使用gradle插件或者maven插件以及转化成eclipse·后导入发现部署到tomc ...
- Android中用GridView实现九宫格的两种方法(转)
Android中用GridView实现九宫格的两种方法http://blog.csdn.net/shakespeare001/article/details/7768455 1.传统办法:实现一个继承 ...
- CSS的overflow属性介绍
overflow 属性规定如何处理如何处理不符合元素框的内容.用法如下:Object.style.overflow=visible|hidden|scroll|auto. 参数介绍: visible: ...