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 ...
随机推荐
- Ubuntu和Windows相互共享文件夹
一.Ubuntu访问Windows共享文件夹 1.对需要共享文件夹右击->属性->共享 2.选择要与其共享的用户,选择好用户点击有点添加按钮添加,然后点击下方的共享按钮 3.完成共享 4. ...
- P3216 [HNOI2011]数学作业
题目描述 小 C 数学成绩优异,于是老师给小 C 留了一道非常难的数学作业题: 给定正整数 N 和 M ,要求计算Concatenate (1 .. N) Mod M 的值,其中 Concatenat ...
- c++11 继承构造
c++11 继承构造 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #includ ...
- 【转】关于在vim中的查找和替换
1,查找 在normal模式下按下/即可进入查找模式,输入要查找的字符串并按下回车. Vim会跳转到第一个匹配.按下n查找下一个,按下N查找上一个. Vim查找支持正则表达式,例如/vim$匹配行尾的 ...
- 【Cf #503 C】Sergey's problem（有趣的构造）
感觉这种构造题好妙啊,可我就是想不到诶. 给出一张无自环的有向图,回答一个独立集,使得图中任意一点都可以被独立集中的某一点两步之内走到. 具体构造方案如下: 下标从小到大枚举点,如果该点没有任何标记, ...
- BZOJ2436 [Noi2011]Noi嘉年华 【dp】
题目链接 BZOJ2436 题解 看这\(O(n^3)\)的数据范围,可以想到区间\(dp\) 发现同一个会场的活动可以重叠,所以暴力求出\(num[l][r]\)表示离散化后\([l,r]\)的完整 ...
- 洛谷 P2022 有趣的数 解题报告
P2022 有趣的数 题目描述 让我们来考虑1到N的正整数集合.让我们把集合中的元素按照字典序排列,例如当N=11时,其顺序应该为:1,10,11,2,3,4,5,6,7,8,9. 定义K在N个数中的 ...
- 【codeforces 553E】 Kyoya and Train
http://codeforces.com/problemset/problem/553/E (题目链接) 艹尼玛,CF还卡劳资常数w(ﾟДﾟ)w!!系统complex被卡TLE了T_T,劳资写了一天 ...
- 20135239 益西拉姆 linux内核分析 扒开系统调用的三层皮（下）
一. 给MenuOS增加time-asm命令 代码解释 1.-rf:强制删除 2.clone :重新克隆 3.time-asm:显示系统时间的汇编形式 给MenuOS增加time和time-asm命令 ...
- Android平台下OpenGL图形编程
ref: Jayway Team Blog中OpenGL ES简明开发教程https://blog.jayway.com/tag/opengl-es/ OpenGL ES 开发教程http://www ...