通过 Parameter 对象添加 Ajax 请求时的参数

[b]之[/b]前写了很多 JQueryElement 的文章, 在 JQueryElement 的控件中有很多 Ajax 调用, 为了方便大家的理解, 写了这篇解释 Parameter 对象是如何为 Ajax 添加设置参数的.

本文更新:

2011-12-10: 增加 Async 属性参考.

2011-12-12: 去掉 ParameterList 和 AjaxList.

由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:

http://code.google.com/p/zsharedcode/wiki/JEParameter

请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码

本文将说明 JQueryElement 当中的 Parameter 对象的作用和使用方法:

* 准备

* 语法

* 参数名

* 参数获取方式

* 默认值

* 数据类型

* 自定义转换函数

* 自动添加的参数

[b]准备[/b]

在此之前, 请确保已经了解 JQueryElement 中一些控件的使用.

[b]语法[/b]

通过添加 Parameter, 可以为 Ajax 调用增加参数:

<je:Parameter
Name="<参数名>" Type="<参数获取方式>"
Value="<参数表达式>" Default="<默认值>"
DataType="<数据类型>" Provider="<自定义转换函数>"/>

<je:Parameter Name="name" Type="Selector"
Value="'#txtAName'" DataType="String"/>

每一个 Parameter 都需要包含在 ParameterList 中, 而 ParameterList 是所有 Async 对象的属性, 下面在点击的事件中, 增加了一个名为 name 的参数.

<ClickAsync Url="webservice.asmx" MethodName="Save" Success="
function(data){
alert(data.d.message);
}
">
<ParameterList>
<je:Parameter Name="name" Type="Selector" Value="'#txtWName3'"/>
</ParameterList>
</ClickAsync>

[b]参数名[/b]

如果调用 WebService, 则参数名和服务器端的参数名是一致的, 比如:

<je:Button ID="cmdWNet3" runat="server">
<ClickAsync Url="webservice.asmx" MethodName="Save">
<ParameterList>
<je:Parameter Name="name" Type="Selector" Value="'#txtWName3'"/>
</ParameterList>
</ClickAsync>
</je:Button>

代码中 Parameter 的 Name 属性设置的参数名为 name, 因此 Save 方法需要一个名为 name 的参数:

[WebMethod]
[ScriptMethod]
public SortedDictionary<string, object> Save ( string name )
{ }

如果使用 ashx 来接收参数, 则使用 Request['name'] 即可.

[b]参数获取方式[/b]

参数获取方式有两种, 一种是 Selector, 这表示 Value 属性是一个选择器, 通过选择器将选择页面上的一个元素, 通常是 input 元素, 将取此元素的值作为参数的值, 另一种是 Expression, 表示 Value 中的是一个 javascript 表达式, javascript 表达式计算的值将作为参数的值:

<je:Parameter Name="name" Type="Selector" Value="'#txtWName3'"/>

<je:Parameter Name="value" Type="Expression" Value="123 + 321" DataType="Number"/>
<je:Parameter Name="value" Type="Expression" Value="add(123, 321)" DataType="Number"/>

代码中的选择器 #txtWName3 使用了单引号, 因为选择器需要是一个字符串, 如果改成 Value="myselector", 则表示将 javascript 变量 myselector 的值作为选择器.

Value 作为 javascript 表达式, 则形式是多样的, 在代码中, 还调用了 javascript 函数 add.

[b]默认值[/b]

通过 Default 属性, 可以设置当参数值为空时的默认值, 是一个 javascript 表达式.

[b]数据类型[/b]

可以通过 DataType 转化参数的类型, 比如转化文本框中的字符串为数值类型:

<je:Parameter Name="name" Type="Selector" Value="'#txtAge'" DataType="number"/>

DataType 属性可以设置为 number, boolean, string, date, 其实, 在服务器端 WebService 自身也会进行一些转化, 详细可以参考 Ajax 与 WebService 之间日期等数据类型的转换.

[b]自定义转换函数[/b]

如果设置了 DataType, 则可以另外的设置 Provider 来提供自定义转换函数, 自定义转换函数将在不能正常转换时调用, 比如:

<je:Parameter Name="name" Type="Selector" Value="'#txtAge'" DataType="number" Provider="
function(value){
if(value == '不惑')
return 40;
else
return 18;
}
"/>

上面的代码中, 如果用户输入的年龄为 不惑 则将转化为 40, 否则为 18.

[b]自动添加的参数[/b]

在一些控件的事件中, 会自动的添加一些参数, 比如 Repeater 的 FillAsync 中会添加 pageindex, pagesize 来表示页码等信息.

JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.