EXT ajax提交

EXT ajax request是ext中对于ajax请求的实现。

通过客户端向服务端发送Ajax请求，可以“直接”调用MVC的action方法，并传递参数，action返回值可以是普通字符串，也可以是json对象。请求可以添加自定义头信息

下面的4个例子来自

http://www.cnblogs.com/lipan/archive/2011/12/09/2272793.html

例1异步请求，发送请求头。

 
    @H_403_39@ 
    
      01 
      Ext.onReady(function () {  
     
    @H_403_39@ 
    
      02 
      new Ext.Button({  
     
    @H_403_39@ 
    
      03 
      renderTo: "div1",  
     
    @H_403_39@ 
    
      04 
      text: "后台Ajax提交", 
     
    @H_403_39@ 
    
      05 
      handler: function  () {  
     
    @H_403_39@ 
    
      06 
      Ext.Ajax.request({  
     
    @H_403_39@ 
    
      07 
      url: 'Ajax_Func1', 
     
    @H_403_39@ 
    
      08 
      headers: {  
     
    @H_403_39@ 
    
      09 
      'userHeader': 'userMsg' 
     
    @H_403_39@ 
    
      10 
      }, 
     
    @H_403_39@ 
    
      11 
      params: { a: 10,b: 20 }, 
     
    @H_403_39@ 
    
      12 
      method: 'GET',  
     
    @H_403_39@ 
    
      13 
      success: function  (response,options) {  
     
    @H_403_39@ 
    
      14 
      Ext.MessageBox.alert('成功','从服务端获取结果: '  + response.responseText);  
     
    @H_403_39@ 
    
      15 
      }, 
     
    @H_403_39@ 
    
      16 
      failure: function  (response,options) {  
     
    @H_403_39@ 
    
      17 
      Ext.MessageBox.alert('失败','请求超时或网络故障,错误编号：'  + response.status);  
     
    @H_403_39@ 
    
      18 
      }  
     
    @H_403_39@ 
    
      19 
      });  
     
    @H_403_39@ 
    
      20 
      }, 
     
    @H_403_39@ 
    
      21 
      id: "bt1" 
     
    @H_403_39@ 
    
      22 
      });  
     
    @H_403_39@ 
    
      23 
       
    @H_403_39@ 
    
      24 
      });

后台的代码：

 
    @H_403_39@ 
    
      1 
      public  ContentResult Ajax_Func1(int  a,int b)   
     
    @H_403_39@ 
    
      2 
      {  
     
    @H_403_39@ 
    
      3 
      string userHeaderMsg = Convert.ToString(Request.Headers["userHeader"]);  
     
    @H_403_39@ 
    
      4 
      return Content((a + b).ToString() + "，userHeader：" + userHeaderMsg);  
     
    @H_403_39@ 
    
      5 
      }

例2 异步请求，返回json结果

 
    @H_403_39@ 
    
      01 
      Ext.onReady(function () {  
     
    @H_403_39@ 
    
      02 
       
    @H_403_39@ 
    
      03 
      new Ext.Button({  
     
    @H_403_39@ 
    
      04 
      renderTo: "div1",  
     
    @H_403_39@ 
    
      05 
      text: "后台Ajax提交方式2返回JSON", 
     
    @H_403_39@ 
    
      06 
      handler: function  () {  
     
    @H_403_39@ 
    
      07 
      Ext.Ajax.request({  
     
    @H_403_39@ 
    
      08 
      url: 'Ajax_Func2', 
     
    @H_403_39@ 
    
      09 
      params: { n: 10 }, 
     
    @H_403_39@ 
    
      10 
      method: 'POST',  
     
    @H_403_39@ 
    
      11 
      callback: function  (options,success,response) {  
     
    @H_403_39@ 
    
      12 
      if (success) {  
     
    @H_403_39@ 
    
      13 
      var responseJson = Ext.JSON.decode(response.responseText);  
     
    @H_403_39@ 
    
      14 
       
    @H_403_39@ 
    
      15 
      Ext.Msg.alert("成功",options.params.n + "的阶乘是：<font color='red'>"  + responseJson.n1 + "</font><br />" 
     
    @H_403_39@ 
    
      16 
      　　　　　　　　　　　　　　　　　　　　　　+ options.params.n + "的累加是：<font color='red'>"  + responseJson.n2 + "</font>");  
     
    @H_403_39@ 
    
      17 
      } else {   
     
    @H_403_39@ 
    
      18 
      Ext.Msg.confirm('失败', 
     
    @H_403_39@ 
    
      19 
      '请求超时或网络故障,错误编号：[' + response.status + ']是否要重新发送？',function  (btn) {  
     
    @H_403_39@ 
    
      20 
      if (btn == 'yes') {  
     
    @H_403_39@ 
    
      21 
      Ext.Ajax.request(options);  
     
    @H_403_39@ 
    
      22 
      }  
     
    @H_403_39@ 
    
      23 
      });  
     
    @H_403_39@ 
    
      24 
      }  
     
    @H_403_39@ 
    
      25 
      }  
     
    @H_403_39@ 
    
      26 
      });  
     
    @H_403_39@ 
    
      27 
      }  
     
    @H_403_39@ 
    
      28 
      });  
     
    @H_403_39@ 
    
      29 
       
    @H_403_39@ 
    
      30 
      });

服务器端的代码如下：

 
    @H_403_39@ 
    
      01 
      public  JsonResult Ajax_Func2(int  n)  
     
    @H_403_39@ 
    
      02 
      {  
     
    @H_403_39@ 
    
      03 
      int n1 = 1;  
     
    @H_403_39@ 
    
      04 
      int n2 = 0;  
     
    @H_403_39@ 
    
      05 
      for (int  i = 1; i <= n; i++)  
     
    @H_403_39@ 
    
      06 
      {   
     
    @H_403_39@ 
    
      07 
      n1 *= i;  
     
    @H_403_39@ 
    
      08 
      n2 += i;  
     
    @H_403_39@ 
    
      09 
      }   
     
    @H_403_39@ 
    
      10 
      var data = new 
     
    @H_403_39@ 
    
      11 
      {   
     
    @H_403_39@ 
    
      12 
      n1 = n1, 
     
    @H_403_39@ 
    
      13 
      n2 = n2  
     
    @H_403_39@ 
    
      14 
      };  
     
    @H_403_39@ 
    
      15 
      return Json(data,JsonRequestBehavior.AllowGet);  
     
    @H_403_39@ 
    
      16 
      }

例3 异步文件上传：

 
    @H_403_39@ 
    
      01 
      //文件上传  
     
    @H_403_39@ 
    
      02 
      Ext.get("button1").on("click",function  () {  
     
    @H_403_39@ 
    
      03 
      Ext.Ajax.request({  
     
    @H_403_39@ 
    
      04 
      url: "Ajax_FileUp", 
     
    @H_403_39@ 
    
      05 
      isUpload: true,  
     
    @H_403_39@ 
    
      06 
      form: "form1",  
     
    @H_403_39@ 
    
      07 
      success: function  (response) {  
     
    @H_403_39@ 
    
      08 
      Ext.MessageBox.alert("上传成功，文本文件内容：",response.responseText);  
     
    @H_403_39@ 
    
      09 
      }  
     
    @H_403_39@ 
    
      10 
      });  
     
    @H_403_39@ 
    
      11 
      });

 
    @H_403_39@ 
    
      1 
      public  ContentResult Ajax_FileUp(HttpPostedFileBase file)  
     
    @H_403_39@ 
    
      2 
      {  
     
    @H_403_39@ 
    
      3 
      System.IO.StreamReader r = new System.IO.StreamReader(file.InputStream,System.Text.UTF8Encoding.Default);  
     
    @H_403_39@ 
    
      4 
      var str = r.ReadToEnd();  
     
    @H_403_39@ 
    
      5 
      return Content(str);  
     
    @H_403_39@ 
    
      6 
      }

例4 异步请求事件。当发起ajax请求之前，可以监听beforerequest事件，本例每当发起ajax事件时，都会把计算器+1：

 
    @H_403_39@ 
    
      1 
      var  ajaxCount = 0;  
     
    @H_403_39@ 
    
      2 
      //每当Ajax请求发起时触发：  
     
    @H_403_39@ 
    
      3 
      Ext.Ajax.on('beforerequest',function  () { Ext.get("span1").update(++ajaxCount) },this);

ajax几个常用的参数如下:

successFunction指定当Ajax请求执行成功后执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。
failureFunction指定当请求出现错误时执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。
scopeObject指定回调函数的作用域，默认为浏览器window。
formObject/String指定要提交的表单id或表单数据对象。
isUploadBoolean指定要提交的表单是否是文件上传表单，默认情况下会自动检查。
headersObject指定请求的Header信息。
xmlDataObject指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。
jsonDataObject/String指定需要发送给服务器端的JSON数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。

disableCachingBoolean是否禁止cache。

总结一下，ext ajax和jquery的ajax差不多，主要是熟悉几个参数，处理好返回值。

EXT ajax提交

猜你在找的Ajax相关文章