EXT AJAX学习

下面是一些关于Ext和Jquery的Ajax的例子，在实际项目中测试通过；

 

其实Ext.Ajax的使用并不难，只是当初我一直不清楚如何获取其返回值，搞得郁闷了一阵子，以下是一个比较简单的例子

 1Ext.Ajax.request({
 2                    url: 'Register.aspx',
 3                    params: {
 4                        oper: 'login',
 5                        LoginEmail:Ext.get('LoginEmail').dom.value,
 6                        LoginPwd:Ext.get('LoginPwd').dom.value
 7                    },
 8                    success: function(response, options) {
 9                      var responseArray = Ext.util.JSON.decode(response.responseText);                                             
10                            if(responseArray.success=='true'){
11                                Cookies.set('Allcard_userName', responseArray.user);
12                                Ext.Msg.alert('信息','您已成功登录！',IsLogin);    
13                            }
14                            else{
15                                Ext.Msg.alert('失败','登录失败，请确认您的帐号密码无误！');    
16                            }
17                    }
18            });

代码说明：
2行：URL参数是要提交到的页面
3行：params是一个需要提交的参数集，使用逗号分隔
8行：当回调成功返回后要执行的函数
9行：获取服务器端的回调参数值
10行：对回调值进行判断处理

这里，得到的responseArray是一个Json数组。如果其中不只一条数据。可以用读取数组的方法，完全读取出来。下面是一个代码：

for(int ii=0;ii<responseArray.length;i++){

     alert(responseArray[ii].id);

}

在action中，需要返回一个json对像。下面是我一个实际项目中的示例：

 

li = pBO.getListForJson(nextTable, nextDisplayColumn, nextValueColumn, where, DbType);//取得一个list
    JSONArray jsonArray1 = JSONArray.fromObject( li );

//json包中的jsonarray类，注意，只有json-lib-2.2.3-jdk13.jar包不够，还需要一个ezmorph-1.0.5.jar包
    System.out.println(jsonArray1);
    response.setContentType("text/json; charset=gb2312");
    response.getWriter().write(jsonArray1.toString());//action中输出该JSON对像到前台页面

 

这里，小弟没有找到很简单的方法可以把RESULTSET输换为JSONARRAY,我的实现方法是新建一个类。然后根据RESULTSET组装该类，完了把值放到LIST中

 

这里需要说明一下的是如何获取回调参数值，Extjs里是通过JSON的数据格式来获取参数的，因此在服务器端处理完事情后，回调的参数应该这样写：（以下是ASP.NET里的写法）

result = "{success:true,user:'winson'}";
Response.Write(result);
Response.End();

将数据以键值对的形式返回，接收时就可使用第一段代码里第9行的方法来接收，由于使用的是JSON格式，因此服务器端就可以非常方便地同时返回多个参数值了。

Ext.Ajax基本使用就是这样，其实也挺简单的，只是如果要在提交时增加Loading效果，那就比较麻烦了，呵，这里我也没深入研究

在这里，顺便加上jquery的ajax应用吧

     Jquery需要返回的json数据和Ext中需要返回数据是一样的。

　　该JS实现的功能是把后台查询所得的数据，插入到指定的页面Table中。 

 

tree.on("dblclick",function(node,event){
	if(node.leaf!=true){
		Ext.MessageBox.confirm('确认框', '你将选择目录下所有项,确定继续吗?',function(button,text){   
         	if(button=="yes") {
          	url='treejsoncallback.jsp?type=parentType&'+node.id;
			$.getJSON(url, function(json){
			for(i=0;i<json.length;i++){
				//alert(json[i].parentText)
				 var strArray=new Array();   
   				strArray=json[i].parentText.split(",");  
   				strArray.unshift("");
   				strArray.push(json[i].nodeId); 
  				//alert(strArray.length);
				addRowToTable("table_ds_product",strArray);
			}
			});
          
          }  
          
      }); 
		}
		else{
			 var strArray=new Array();   
   				strArray=node.attributes.parentText.split(",");  
   				strArray.unshift("");
   				strArray.push(node.attributes.nodeId); 
  				//alert(strArray.length);
				addRowToTable("table_ds_product",strArray);
			
		}		
	});

function addRowToTable(strTableId, arrTdText){ 
 var objTable = document.getElementById(strTableId);
   if( objTable == null ) {    
   return; 
    }
   var objTableBody = objTable.getElementsByTagName("TBODY")[0];
   var row = document.createElement("TR") 
   var col = document.createElement("TD")
   
   col.bgcolor='#A6C5FD';
   col.appendChild(document.createTextNode(arrTdText[0]))  
    row.appendChild(col);  
     for( var i = 1; i < arrTdText.length; i++ ) {
     var col = document.createElement("TD")  
         col.appendChild(document.createTextNode(arrTdText[i]))  
         row.appendChild(col);  
       }
     var lastCol =  document.createElement("TD");
   var innerStr = "<input type='image' onmouseover=\"this.style.cursor='hand'\" onclick='del(this)' src='/PsoWeb/images/cqpso/Delete.gif'>";
    lastCol.innerHTML=innerStr;
    row.appendChild(lastCol); 
   objTableBody.appendChild(row);}