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 ...
随机推荐
- 如何在数据表中存取图片 - 回复 "三足乌" 的问题
问题来源: http://www.cnblogs.com/del/archive/2009/05/28/1491186.html#1801853 准备工作:1.在空白窗体上添加: ClientData ...
- mysql 添加行号
首先准备演示数 DROP TABLE IF EXISTS `computer_stu`; CREATE TABLE `computer_stu` ( `id` ) NOT NULL, `name` ) ...
- ios开发之 -- xib关联自定义view
在xib下使用自定义的view,因为很多时候,可能幸亏自顶一个view,然后在view里面填充控件,但是需要重写很多无用的 代码,而且很容易出错不说,还很好工作量,使用xib的话,分钟搞定一个view ...
- URAL 1969. Hong Kong Tram
有一个trick就是没想到,枚举第二段时间后,要检测该火车能否继续跑一圈来判断,不能先检测前半圈能不能跑加进去后在检测后半段: // **** 部分不能放在那个位置: 最近代码导致的错误总是找不出,贴 ...
- Python内部类，内部类调用外部类属性，方法
一 Python中内部类 典型定义: class MyOuter: age=18 def __init__(self,name): self.name=name class MyInner: def ...
- uoj318 [NOI2017]蔬菜 【贪心 + 堆 + 并查集】
题目链接 uoj 题解 以前看别人博客,在考场上用费用流做,一直以为这题是毒瘤网络流题 没想到竟然是贪心模拟题... 如果只有一个蔬菜呢?这就是一个经典的普及难度的贪心,正着推面临优先选择的困难,而逆 ...
- bzoj4035【HAOI2015】数组游戏
题目描述 有一个长度为N的数组,甲乙两人在上面进行这样一个游戏:首先,数组上有一些格子是白的,有一些是黑的.然 后两人轮流进行操作.每次操作选择一个白色的格子,假设它的下标为x.接着,选择一个大小在1 ...
- bzoj4427【Nwerc2015】Cleaning Pipes清理管道
题目描述 Linköping有一个相当复杂的水资源运输系统.在Linköping周围的出水点有一些水井.这些水通过管道输送到其它地点.每条管道是从某一个水井到城市的某个位置的直线管道. 所有管道在地下 ...
- (转)编码规范系列（一）：Eclipse Code Templates设置
背景:长久以来,对java编程中的注释不甚理解.再次学习<疯狂JAVA讲义>基础,深深的感到自己基本功的不牢固.所以要做到事无巨细,好好修炼. 认识注释 常识 注释的作用: 回顾原有的代码 ...
- 【贪心】【CF1061D】 TV Shows
Description 给定 \(n\) 个电视节目和两个参数 \(x,y\).你想要看全部的电视节目,但是同一个电视机同一个时刻只能播放一个电视节目,所以你只能多租赁电视机.在时间 \([l,r]\ ...