语法:$.ajax({option})
option表示参数。以key/value形式出现。
常用参数:type:post/get。
url:发送请求的地址。
data:{object:object} 发送到服务器的数据,必须为key/value格式。可以设置processdata属性,不转换数据格式。
success:function(msg){} 请求成功后回调函数。
error:function(msg){} 请求失败后回调函数。
datatype:xml/html/script/json/jsonp 返回的数据类型。
再看实例理解:
1.用ajax实现无刷新审核功能(点击审核后,linkbutton不可用,并改为已审核)。
界面如下:
这里数据显示用的是repeater控件,其中审核按钮为linkbutton服务器控件。
页面html代码:
复制代码 代码如下:
rules=none>
选择
单号
状态
店铺
购买者
rmb
操作
1号店铺
张三
100.00
审核
全选/反选
实现代码如下:
a.脚本代码:
复制代码 代码如下:
function lbtn_audit_eshop_price_command(obj,orderid)
{
if (obj.innerhtml != 审核) return false;
if (!confirm(确定要审核吗?)) {
return false;
}
$.ajax({
type:post,//post发送方式
url:ajaxtest.aspx,//请求地址为本页面地址
data:{orderid:orderid,action:single_review},//传入数据为订单号以及action
success:(function(msg){
if(msg!=)
{
var chkid = orderid_+orderid;
document.getelementbyid(chkid).disabled = disabled;
obj.disabled = disabled;
obj.innerhtml = 已审核;
}
})
});
return false;
}
b.服务器代码:
根据action判断事件的执行。
复制代码 代码如下:
protected void page_load(object sender, eventargs e)
{
conn.open();
//执行动作
string action = commfun.get_safe_str(request[action]);
if (!ispostback)
{
if (action == )
{
rpt_pro_order_list_bind();
}
else if (action == single_review) //点击审核
{
lbtn_audit_eshop_price_command();
}
else //点击批量审核
{
btn_batch_review_eshop_price();
}
}
}
repeater绑定数据后,为linkbutton添加onclick属性,用于执行页面脚本代码。
复制代码 代码如下:
protected void rpt_pro_order_list_bind()
{
……
this.rpt_review.datasource = dt;
this.rpt_review.databind();
for (int i = 0; i {
linkbutton lbtn_audit_eshop_price = (linkbutton)this.rpt_review.items[i].findcontrol(lbtn_audit_eshop_price);
if (dt.rows[i][audit_eshop_price].tostring() == 1)
{
lbtn_audit_eshop_price.enabled = false;
lbtn_audit_eshop_price.text = 已审核;
}
else
{
lbtn_audit_eshop_price.enabled = true;
lbtn_audit_eshop_price.attributes.add(onclick,
return lbtn_audit_eshop_price_command(this, ' + dt.rows[i][orderid].tostring() + '););
}
}
}
[code]
2.用ajax实现无刷新批量审核。
注意:这里用到的控件必须是html控件,否则会引起回发。但在repeater内部服务器控件也可以使用。
这里只需给input=btton添加一个onclick属性,直接执行ajax脚本。
脚本内容如下:
[code]
//批量审核
function batch_review()
{
if(!checkselitem(orderid,请选择订单!)) return false;
if(!confirm(确定要审核吗?)) return false;
var orderids = ; //记录所有订单号
var elements = document.getelementsbyname(orderid);
for (var m=0; m if(m == elements.length - 1)
{
orderids = orderids + elements[m].value;
}
else
{
orderids = orderids + elements[m].value + ,;
}
}
var orderidarr = orderids.split(',');
var neworderidstr = ;
var j = 0;//记录选择的订单个数
var position = ;//记录选择的订单位置
for(var i = 0;i{
var chk_id = orderid_+orderidarr[i];
if($_id(chk_id).checked)//记录选中的订单
{
if(i == orderidarr.length - 1)
{
neworderidstr += orderidarr[i];
position += i;
}
else
{
neworderidstr += orderidarr[i]+,;
position += i + ,;
}
j++;
}
}
neworderidstr = removerightcomma(neworderidstr);//去除末尾逗号后的订单号
position = removerightcomma(position);//去除末尾逗号后的位置
$.ajax({
type: post,
url: ajaxtest.aspx,
data: { order_id_arr: neworderidstr, action: batch_review },
success: function(msg) {
if (msg != ) {
for(var k = 0 ;k{
var neworderidarr = neworderidstr.split(',');
var positionarr = position.split(',');
$_id(orderid_+neworderidarr[k]).disabled = disabled;
if(parseint(positionarr[k]){
$_id(rpt_review_ctl0+parseint(positionarr[k])+_lbtn_audit_eshop_price).innerhtml = 已审核;
$_id(rpt_review_ctl0+parseint(positionarr[k])+_lbtn_audit_eshop_price).disabled = disabled;
}
else
{
$_id(rpt_review_ctl+parseint(positionarr[k])+_lbtn_audit_eshop_price).innerhtml = 已审核;
$_id(rpt_review_ctl+parseint(positionarr[k])+_lbtn_audit_eshop_price).disabled = disabled;
}
}
}
}
})
return true;
}
//去除右边逗号
function removerightcomma(str)
{
if(str == ) return;
var i;
for(i = str.length-1;i>=0;i--)
{
//charat(i)取某一个位置的字符
if(str.charat(i) != ,) break;
}
//截取字符串,substring(start,stop);返回的结果不包含最后一位
str = str.substring(0,i+1);
return str;
}
至此实例讲解结束。
最后回顾思路:
1.单条审核:在页面初始化时,给审核按钮加上onclick属性,执行页面脚本,单击审核后,后台的page_load事件根据action选择执行的事件。
2.批量审核: 给批量审核按钮加上onclick属性,执行ajax脚本,后台的page_load事件同样根据action选择执行的事件。批量审核按钮必须为html控件。
