`
salute
  • 浏览: 55523 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

jquery json ajax例子

阅读更多
/*
 *tenpo tag
 */
function getTenpo(){
	$("#area").FillOptions("/syspro/ajax/ajaxGetArea.action",{datatype:"json",textfield:"name",valuefiled:"id"});
	if($.browser.msie && selected) {
		$('option[value='+selected+']',this).attr('selected',true);
	}
	if($("#areaValue").val()==""||$("#areaValue").val()==null||$("#areaValue").val()=="null"){
		$("#area").AddOption("","-1",true,0);
	}else{
		$("#area").AddOption("","-1",false,0);
		$("#area").val($("#areaValue").val());
		$("#district").FillOptions("/syspro/ajax/ajaxGetDistrict.action?area="+$("#areaValue").val(),{datatype:"json",textfield:"name",valuefiled:"id"});
		if($("#districtValue").val()==""||$("#districtValue").val()==null||$("#districtValue").val()=="null"){
			$("#district").AddOption("","-1",true,0);
		}else{
			$("#district").AddOption("","-1",false,0);
			$("#district").val($("#districtValue").val());
			$("#tenpo").FillOptions("/syspro/ajax/ajaxGetTenpo.action?district="+$("#districtValue").val(),{datatype:"json",textfield:"name",valuefiled:"id"});
			if($("#tenpoValue").val()==""||$("#tenpoValue").val()==null||$("#tenpoValue").val()=="null"){
				$("#tenpo").AddOption("","-1",true,0);
			}else{
				$("#tenpo").AddOption("","-1",false,0);
				$("#tenpo").val($("#tenpoValue").val());
			}
		}
	}
	$("#area").CascadingSelect(
		$("#district"),
		"/syspro/ajax/ajaxGetDistrict.action",
		{datatype:"json",textfield:"name",valuefiled:"id",parameter:"area"},
		function(){
			$("#district").AddOption("","-1",true,0);
			$("#tenpo").html("");
			$("#tenpo").AddOption("","-1",true,0);
		}
	);
	$("#district").CascadingSelect(
		$("#tenpo"),
		"/syspro/ajax/ajaxGetTenpo.action",
		{datatype:"json",textfield:"name",valuefiled:"id",parameter:"district"},
		function(){
			$("#tenpo").AddOption("","-1",true,0);   
		}
	);
}
/**
 *city tag
 */
function getCity(){
	$("#adArea").FillOptions("/syspro/ajax/ajaxGetAdArea.action",{datatype:"json",textfield:"name",valuefiled:"id"});
	if($.browser.msie && selected) {
		$('option[value='+selected+']',this).attr('selected',true);
	}
	if($("#adAreaValue").val()==""||$("#adAreaValue").val()==null||$("#adAreaValue").val()=="null"){
		$("#adArea").AddOption("","-1",true,0);
	}else{
		$("#adArea").AddOption("","-1",false,0);
		$("#adArea").val($("#adAreaValue").val());
		$("#prefecture").FillOptions("/syspro/ajax/ajaxGetPrefecture.action?adArea="+$("#adAreaValue").val(),{datatype:"json",textfield:"name",valuefiled:"id"});
		if($("#prefectureValue").val()==""||$("#prefectureValue").val()==null||$("#prefectureValue").val()=="null"){
			$("#prefecture").AddOption("","-1",true,0);
		}else{
			$("#prefecture").AddOption("","-1",false,0);
			$("#prefecture").val($("#prefectureValue").val());
			$("#city").FillOptions("/syspro/ajax/ajaxGetCity.action?prefecture="+$("#prefectureValue").val(),{datatype:"json",textfield:"name",valuefiled:"id"});
			if($("#cityValue").val()==""||$("#cityValue").val()==null||$("#cityValue").val()=="null"){
				$("#city").AddOption("","-1",true,0);
			}else{
				$("#city").AddOption("","-1",false,0);
				$("#city").val($("#cityValue").val());
			}
		}
	}
	$("#adArea").CascadingSelect(
		$("#prefecture"),
		"/syspro/ajax/ajaxGetPrefecture.action",
		{datatype:"json",textfield:"name",valuefiled:"id",parameter:"adArea"},
		function(){
			$("#prefecture").AddOption("","-1",true,0);
			$("#city").html("");
			$("#city").AddOption("","-1",true,0);
		}
	);
	$("#prefecture").CascadingSelect(
		$("#city"),
		"/syspro/ajax/ajaxGetCity.action",
		{datatype:"json",textfield:"name",valuefiled:"id",parameter:"prefecture"},
		function(){
			$("#city").AddOption("","-1",true,0);   
		}
	);
}
/**
 *Json common
 */
function JsonResult(url,options){
	if(url.length == 0) throw "request is required";
    var strJosn = eval(options);
    var params = "";
      		
    if(strJosn!=undefined){
    	for(var i=0; i<strJosn.length; i++){
    		var id = strJosn[i].id;
    		var name = strJosn[i].name;
    		var value = $("#"+id).val();
    		if(value == undefined || value == ""){
    			value = dojo.widget.byId(id).getValue();
    		}
    		params += name+"="+value+"&";
		}
		params = params.substring(0,params.length-1);
		params = params.replace(new RegExp("-","gm"),"/");
    }
    var datas;
    $.ajax({
   		type: "GET",
   		dataType: "json",
   		url: url,
   		data: params,
   		async: false,
   		timeout:10000,
   		beforeSend:function(XMLHttpRequest){
   			//$.blockUI({ message: 'Please Wait a moment...'});
   			//setTimeout($.unblockUI,3000);
   		},
  		error:function(XMLHttpRequest, textStatus, errorThrown){
  			if(textStatus == "timeout"){
  				alert("Timeout please try agian!");
  			}else {
  				alert("error");
  			}
  		},
  		success: function(json){

  			datas = json;
  		}
	});
    return datas;
}



jsp
<%@ page contentType="text/html; charset=shift_jis"%>
<%@ taglib prefix="st" uri="/syspro-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<jsp:include page="../css.jsp"></jsp:include>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>一覧表示画面</title>
<script type="text/javascript"
	src="../javascript/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
	src="../javascript/jquery/js/jQuery.CascadingSelect.js"></script>
<script type="text/javascript"
	src="../javascript/jquery/js/jQuery.FillOptions.js"></script>
<script type="text/javascript" src="../javascript/Ajax.js"></script>
</head>
<body>
<s:form action="/ajaxTest/ajaxTest.action">
	<table width="500">
		<tr>
			<td><st:tenpos area="area" district="district" tenpo="tenpo" /></td>
			<td><s:submit value="確認" /></td>
		</tr>
		<tr>
			<td><st:citys adArea="adArea" prefecture="prefecture" city="city"  theme="vertical"/></td>
			<td><s:submit value="確認" /></td>
		</tr>
	</table>
</s:form>
</body>
</html>



配置文件
<?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.0.dtd">
<struts>
	<package name="ajaxTest" extends="default" namespace="/ajaxTest">
		<action name="ajaxTest" class="ajaxTestAction">
			<param name="menu_level_top">sample</param>
			<param name="menu_level_second">ajaxTest</param>
			<result name="success" type="tiles">ajax</result>
		</action>
	</package>
	<package name="ajax" extends="default" namespace="/ajax">
		<action name="ajaxGetArea" class="ajaxAction" method="getAllArea">
			<result type="json" />
		</action>
		<action name="ajaxGetDistrict" class="ajaxAction" method="getDistrictByAreaCd">
			<result type="json" />
		</action>
		<action name="ajaxGetTenpo" class="ajaxAction" method="getTenpoByDistrictCd">
			<result type="json" />
		</action>
		<action name="ajaxGetAdArea" class="ajaxAction" method="getAdArea">
			<result type="json" />
		</action>
		<action name="ajaxGetPrefecture" class="ajaxAction" method="getPrefectureByAreaCd">
			<result type="json" />
		</action>
		<action name="ajaxGetCity" class="ajaxAction" method="getCityByPrefectureCd">
			<result type="json" />
		</action>
	</package>
</struts>



对应的action

package jp.co.syspro.action.ajax;

import java.util.List;
import jp.co.syspro.common.module.LabelValueBean;
import jp.co.syspro.common.util.JsonUtil;
import jp.co.syspro.service.ajax.AjaxService;
import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("unchecked")
public class AjaxAction extends ActionSupport {

	private static final long serialVersionUID = -5057041300197154859L;

	private AjaxService ajaxService = null;
	/**
	 * エリア
	 */
	private String area;
	/**
	 * 区
	 */
	private String district;
	/**
	 * 都道府県
	 */
	private String prefecture;
	/**
	 * 市町村
	 */
	private String adArea;
	private List<LabelValueBean> optionList = null;

	/**
	 * 全てエリア取得
	 * 
	 * @return エリアリスト
	 * @throws Exception
	 */
	public String getAllArea() throws Exception {
		optionList = ajaxService.getArea();
		JsonUtil.sendJson(optionList);
		return null;
	}

	/**
	 * エリアによる 区取得
	 * 
	 * @return 区リスト
	 * @throws Exception
	 */
	public String getDistrictByAreaCd() throws Exception {
		optionList = ajaxService.getDistrictByAreaCd(area);
		JsonUtil.sendJson(optionList);
		return null;
	}

	/**
	 * 区によって 店舗取得
	 * 
	 * @return 店舗リスト
	 * @throws Exception
	 */
	public String getTenpoByDistrictCd() throws Exception {
		optionList = ajaxService.getTenpoByDistrictCd(district);
		JsonUtil.sendJson(optionList);
		return null;
	}
	
	/**
	 * 全てadエリア取得
	 * 
	 * @return adエリアリスト
	 * @throws Exception
	 */
	public String getAdArea() throws Exception {
		optionList = ajaxService.getAdArea();
		JsonUtil.sendJson(optionList);
		return null;
	}
	
	/**
	 * adエリアによる 都道府県取得
	 * 
	 * @return 都道府県スト
	 * @throws Exception
	 */
	public String getPrefectureByAreaCd() throws Exception {
		optionList = ajaxService.getPrefectureByAreaCd(adArea);
		JsonUtil.sendJson(optionList);
		return null;
	}

	/**
	 * 都道府県によって 市町村取得
	 * 
	 * @return 市町村リスト
	 * @throws Exception
	 */
	public String getCityByPrefectureCd() throws Exception {
		optionList = ajaxService.getCityByPrefectureCd(prefecture);
		JsonUtil.sendJson(optionList);
		return null;
	}

	public String getDistrict() {
		return district;
	}

	public void setDistrict(String district) {
		this.district = district;
	}

	public void setArea(String area) {
		this.area = area;
	}

	public String getArea() {
		return area;
	}

	public AjaxService getAjaxService() {
		return ajaxService;
	}

	public void setAjaxService(AjaxService ajaxService) {
		this.ajaxService = ajaxService;
	}

	public String getPrefecture() {
		return prefecture;
	}

	public void setPrefecture(String prefecture) {
		this.prefecture = prefecture;
	}

	public void setAdArea(String adArea) {
		this.adArea = adArea;
	}

	public List<LabelValueBean> getOptionList() {
		return optionList;
	}

	public void setOptionList(List<LabelValueBean> optionList) {
		this.optionList = optionList;
	}

}



[img][/img]
分享到:
评论

相关推荐

    jquery+ajax+json例子

    在Web开发中,jQuery、Ajax和JSON是三个非常重要的技术,它们共同构成了高效、动态的用户界面的基础。本文将深入探讨这些技术,并结合一个名为"TestJQuery"的示例来展示它们如何协同工作。 首先,jQuery是一个...

    AJAX+JQuery+JSON的综合例子

    总结来说,这个综合例子展示了如何结合使用AJAX、jQuery和JSON,实现从服务器获取数据并在客户端动态呈现,尤其适合实时更新数据的场景,例如实时股票报价、天气预报等。熟练掌握这些技术对于任何Web开发者来说都是...

    jquery ajax json 的例子

    在这个“jquery ajax json”的例子中,我们将探讨如何结合这三者实现动态的数据加载。 首先,`display.html`是主页面,它包含HTML结构以及调用jQuery AJAX函数的JavaScript代码。在这个HTML文件中,通常会有一个...

    jquery,ajax的几个小例子

    **jQuery和Ajax技术详解** jQuery是一款非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理以及Ajax交互。在Web开发中,jQuery是实现动态和交互性网页的关键工具。Ajax(Asynchronous ...

    struts2+jquery+json+ajax例子

    总结起来,"struts2+jquery+json+ajax"的例子展示了如何利用这些技术协同工作,实现一个无刷新的登录界面,提供流畅的用户体验。通过Struts2处理业务逻辑和数据验证,jQuery和Ajax负责前后端的通信,JSON作为数据...

    jquery+ajax例子

    在这里,我们将深入探讨基于jQuery的Ajax应用,以"jQuery+Ajax例子"为标题,结合项目描述和标签,我们来详细讲解这些技术。 1. **jQuery简介** jQuery由John Resig在2006年创建,旨在使JavaScript编程变得更加简单...

    ajax,jQuery 例子大全,json例子

    这个压缩包文件中的例子涵盖了Ajax、jQuery和JSON的基础使用,从简单的GET请求到复杂的异步数据交互,对于初学者来说是非常宝贵的资源。通过学习和实践这些例子,你可以更好地理解和掌握如何使用Ajax和jQuery来创建...

    json +jquery DEMO AJAX

    在这个例子中,当用户点击“获取数据”按钮时,会触发一个AJAX请求到`data.json`,获取到的JSON数据会被解析并显示在页面上。 总的来说,JSON和jQuery的结合使用大大简化了AJAX操作,使得数据交换更加高效和便捷。...

    SSH1,JQuery的ajax返回json二维数组处理过程

    总结来说,这个例子展示了如何结合SSH1和jQuery AJAX处理JSON二维数组,实现菜单联动下拉框以及附加的查看详情功能。整个流程包括前端的AJAX请求、后端的JSON数据处理以及UI交互逻辑。理解这些技术对于开发复杂的Web...

    jquery的ajax例子无错版

    标题“jquery的ajax例子无错版”表明这是一个关于jQuery AJAX用法的示例,且已针对可能出现的编码问题进行了处理,确保在utf_8和gb2312两种常见字符编码下都能正常显示,避免了乱码问题。在多语言网站或者处理中文...

    jQuery_Ajax_Json全解析

    **jQuery、Ajax与JSON全解析** 在Web开发中,jQuery、Ajax和JSON是不可或缺的工具,它们共同构建了现代网页的动态交互体验。本解析将深入探讨这三个概念及其相互关系。 **jQuery:简化JavaScript操作** jQuery是...

    jquery-ajax实例

    在JavaScript的世界里,jQuery是一个非常流行的库,它极大地简化了DOM操作、事件处理以及Ajax交互。本实例聚焦于"jQuery-AJAX",这是一项核心功能,用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容...

    一个完整的jquery+ajax传送请求的实例

    在IT行业中,jQuery和AJAX是两个非常关键的前端技术,它们极大地简化了网页与服务器之间的数据交互。本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据...

    jquery与json和ajax的结合

    本文将详细介绍如何利用jQuery来实现与JSON和AJAX的有效结合,并通过一个具体的例子来展示其实际应用。 #### 二、基础知识简介 ##### 2.1 jQuery简介 jQuery是一款快速、简洁的JavaScript库,它极大地简化了HTML...

    springmvc + jquery + ajax + json 异步传递数据

    这个例子中,前端通过Ajax向服务器的'/api/data'路径发送GET请求,期望返回JSON数据。当请求成功时,将在页面上显示接收到的message字段的值。 总的来说,SpringMVC、jQuery、Ajax和JSON的结合,为Web应用提供了一...

    ajax+json实例

    在这个例子中,服务器端通过`JsonResult`返回JSON格式的用户信息,客户端通过AJAX请求获取这些信息并解析显示。 **五、总结** AJAX+JSON在.NET环境中的应用大大提高了Web应用程序的交互性和效率,减少了不必要的...

    jquery json 增删改查

    在"jquery增删改查"的例子中,jQuery主要用于页面元素的DOM操作,提供简洁的API来处理用户交互、Ajax请求以及创建复杂的动画效果。 例如,jQuery可以方便地选择DOM元素: ```javascript $("#elementId").click...

    JQuery JSON ajax

    **jQuery、JSON与AJAX详解** 在Web开发中,jQuery、JSON和AJAX是三个非常重要的概念,它们共同构建了现代动态网页的核心技术。这里,我们将深入探讨这三个技术及其相互关系。 **一、jQuery** jQuery是由John Resig...

    简单的SSH+JQuery+JSON例子

    结合以上技术,一个简单的SSH+JQuery+JSON例子可能包含以下步骤: 1. 用户通过前端页面发送Ajax请求,请求由JQuery发起,数据格式为JSON。 2. Struts框架接收到请求,通过Action转发到Spring控制层。 3. Spring控制...

Global site tag (gtag.js) - Google Analytics