ExtJs4 笔记（3） Ext.Ajax 对ajax的支持
发布时间：2020-12-15 22:06:05 所属栏目：百科 来源：网络整理
导读：本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持，包括Ajax封装，函数事件操作封装，还有扩展的常用函数等。Ajax服务端交互式操作是提交到.NET MVC。后续服务端交互都采用这一方式实现。 一、ExtJs中的Ajax：Ext.Ajax.request 通过客户端向服务端发送Aja
|
本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持，包括Ajax封装，函数事件操作封装，还有扩展的常用函数等。Ajax服务端交互式操作是提交到.NET MVC。后续服务端交互都采用这一方式实现。 一、ExtJs中的Ajax：Ext.Ajax.request通过客户端向服务端发送Ajax请求，可以“直接”调用MVC的action方法，并传递参数，action返回值可以是普通字符串，也可以是json对象。请求可以添加自定义头信息。看下面例子： 1.异步请求，发送自定义请求头：html页面如下： [html]
我们先通过一个按钮单击事件触发ajax请求，服务端返回string到客户端，异步请求时，为请求添加自定义头“userHeader”，并在服务端获取。如下是js代码： [Js]
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
Ext.onReady(
function
() {
new
Ext.Button({
renderTo:
"div1"
,
text:
"后台Ajax提交"
handler:
() {
Ext.Ajax.request({
url:
'Ajax_Func1'
'userHeader'
:
'userMsg'
},
params: { a: 10,b: 20 },
method:
'GET'
success:
(response,options) {
Ext.MessageBox.alert(
'成功'
'从服务端获取结果: '
+ response.responseText);
failure:
'失败'
'请求超时或网络故障,错误编号：'
+ response.status);
}
});
id:
"bt1"
});
});
|
服务端MVC接受请求的action代码：
[C#]
5
public
ContentResult Ajax_Func1(
int
a,
b)
{
string
userHeaderMsg = Convert.ToString(Request.Headers[
"userHeader"
]);
return
Content((a + b).ToString() +
"，userHeader："
+ userHeaderMsg);
}
然后我们在火狐中调试：自定义请求头已被添加。
查看执行结果：
2.异步请求，返回json：
如果要返回json到客户端，MVC需要使用JsonResult的acton，自动将C#对象转换为json格式。客户端代码如下：
24
25
26
27
28
29
30
Ext.Button({
"后台Ajax提交方式2返回JSON"
() {
Ext.Ajax.request({
'Ajax_Func2'
params: { n: 10 },
'POST'
callback:
(options,success,response) {
if
(success) {
var
responseJson = Ext.JSON.decode(response.responseText);
Ext.Msg.alert(
"成功"
"的阶乘是：<font color='red'>"
+ responseJson.n1 +
"</font><br />"
+ options.params.n +
"的累加是：<font color='red'>"
+ responseJson.n2 +
"</font>"
);
}
else
{
Ext.Msg.confirm(
+ response.status +
']是否要重新发送？'
(btn) {
(btn ==
'yes'
) {
Ext.Ajax.request(options);
}
});
}
}
});
}
});
});