ExtJs4入门之五: Ajax类

一:简单ajax交互

js

Ext.onReady(function(){

	Ext.Ajax.request({
		url:"fakeData.jsp",params:{ 'id':'1'},method:"POST",timeout:3000,//请求超时时间3秒
		//form:"formID" //ajax提交一个表单 . (还有个isUpload配置,控制是否上传附件)
		success:function( response,options){
			//alert("==>成功" + response.responseText +"__" + options);
			var userArray = Ext.JSON.decode(response.responseText).users;
			Ext.Array.each( userArray,function(aUser){
				alert("==>"+aUser.name +"__" + aUser.age);
			})
		},failure:function( response,options){
			alert("==>失败" + response.responseText +"__" + options);
		}
	})
	

<%@ page language="java"  contentType="text/html" pageEncoding="UTF-8"%>
<%

	//response.getWriter().write( " {name:'rt',age:24} ");
	String param = request.getParameter("id");
	System.out.println("==>"+param);
	
	response.getWriter().write( "{ 'users':[ { 'name':'rt','age':24 },{ 'name':'kk','age':24 }  ]}" );
		
%>

二:getLoader

js

	var time = Ext.get("btn").getLoader();
	time.load({
		url:"timeData.jsp",renderer:function( loader,response,request){
			//alert( response.responseText );
			var obj = Ext.getDom("divId");
			obj.innerText = response.responseText;
		}
	});

<%@ page language="java"  contentType="text/html" pageEncoding="UTF-8"%>
<%@ page  import="java.lang.*" %> 
<%@ page  import="java.util.*" %> 
<%@ page  import="java.text.*" %> 

<%

	response.setCharacterEncoding("UTF-8");


	  Date currentTime = new Date();
	  SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
	  String dateString = formatter.format(currentTime);


	response.getWriter().write( dateString );
		
%>

三:简单联动例子

//==>ajax地区联动例子
	var cityObj = Ext.get("city");
	//1绑定事件
	cityObj.on("change",function(even,sel){
		//2获得数值
		var val = sel.options[sel.selectedIndex].value;
		//3ajax获取数据
		Ext.Ajax.request({
			url:"cityData.jsp",params:{ 'value':val},success:function( response,options){
				var data = response.responseText;
				//alert("==>成功==>" +data );
				//4联动
				//==>Ext的Dom操作太累,比如下列清空操作... 
				//var area =  Ext.get("area").dom;
				//Ext.Array.each( area,function( obj ){
				//	area.options.remove();
				//})
				//==>实在扛不住了...我先用jQuery...
				$("#area").empty(); 
				var arr = eval(data);
				$.each(arr,function(i,obj) {
				    $("#area").append("<option value="+obj.value+">"+obj.name+"</option>");
				});
			}
		})
	})

	 		<select name="city" id="city">
	 			<option value=""></option>
	 			<option value="北京">北京</option>
	 			<option value="上海">上海</option>
	 		</select>
	 		</br>
	 		<select name="area" id="area">
	 			<option value="---">---</option>
	 		</select>

cityData.jsp

<%@ page  import="java.text.*" %> 

<%

	response.setCharacterEncoding("UTF-8");
	String param = request.getParameter("value");
	String bj= " [{'name':'朝阳','value':'朝阳'},{'name':'门头沟','value':'门头沟'}] " ;
	String sh = " [{'name':'黄浦','value':'黄浦'},{'name':'徐汇','value':'徐汇'}] " ;
	
	
	if( param.equals("北京"))
	{

		response.getWriter().write( bj );
	}
	else if( param.equals("上海"))
	{
		response.getWriter().write( sh );
	}
%>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!