EXT ajax提交

最新推荐文章于 2021-08-05 23:45:27 发布

chenlaoyang

最新推荐文章于 2021-08-05 23:45:27 发布

阅读量968

点赞数

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

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

下面的4个例子来自

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

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

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

后台的代码：

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

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

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

服务器端的代码如下：

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

例3 异步文件上传：

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

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

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

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

ajax几个常用的参数如下:

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

disableCaching Boolean 是否禁止cache。

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