jquery json ajax事例 _JavaScript

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]