ExtJs4入门之五: Ajax类-优快云博客

本文介绍了使用JavaScript的Ext库进行简单的AJAX交互，并通过示例展示了如何实现地区联动选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一:简单ajax交互

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);
		}
	})

fakeData.jsp

<%@ 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

	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;
		}
	});

timeData.jsp

<%@ 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},
			method:"POST",
			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 );
	}
%>