ajax 两次传相同的数据,Ajax叠加(Ajax返回数据用Ajax发出)示例代码

Ajax叠加(Ajax返回数据用Ajax发出)示例代码

更新时间:2013年08月21日 15:05:07   作者:

把参数用Ajax发送到数据库进行查询然后用Ajax将数据发送到数据库签到表,于是有了下面的代码,感兴趣的朋友可以了解下,希望对大家学习ajax有所帮助

最近在做人事管理系统的一个签到功能,首先是把部门当做参数,把参数用Ajax发送到数据库进行查询,然后以表格形式动态生成员工信息到返回页面的Div里,表格最后的一列是签到按钮,这时我想用JQuery继续获取被点击的“签到”按钮,然后用Ajax将数据发送到数据库签到表,更新签到表,于是我就把每个签到按钮的id属性设置成第一次Ajax返回的每个员工信息的工号,再次用JQuery获取,怎么获取呢?想到了标签加事件选择器,于是写了下面代码:

$(function(){

$("tr input:button").click(){

$.ajax({

type: "POST",

url: "page_helper.ashx",

data: "name=K&pid" + $(this).attr("id"),

success: function (html) {

$("#ReturnHTML").html(html);

},

error: function () {

alert("服务器繁忙,请稍后再试!");

}

});

}

});

可是后来点击却发现没有获取到点击事件,点击按钮根本就没有反应,当我用浏览器查看返回的源码的时候,发现原来Ajax返回的HTML代码根本就没有被添加到页面中,这回怎么办呢?后来去百度里检索了半天,都说Ajax返回的数据无法用浏览器查看到源码,因为是异步的,检索了一天,头又大又疼,于是就晚上了,每次遇到大的问题,就赶紧睡觉,在梦中想实现方法,这样一方面可以休息,另一方面也可以解决问题,一般的时候第二天问题都会有答案,也都能实现。

第二天早晨醒来,思路还是没有,我想这次应该是大问题了,是不是我想要实现的不可能实现呢?百度里几乎没有用两次Ajax请求的,无奈之下在QQ空间发布了悬赏求助,悬赏是宴请三天三夜,后来终于我伟大的高中同学给了我帮助,当然不是因为悬赏才帮助我的,哈哈哈。

高中同学是这么说的,Jquery中有个live方法,可以获取动态生成的HTML代码元素,后来我就把live方法敲了进去,看了有三个参数event,data,function;于是查看了Jquery的帮助文档。

event:必需,规定附加到元素的一个或多个事件,由空格分隔多个事件。必须是有效的事件。

data:可选,规定传递到该函数的额外数据。

function:必需,规定当前事件发生时运行的函数。

这时的我这时大旱逢甘霖啊,于是写下下面代码:

$(function(){

$("tr input:button").live("click", function () {

$.ajax({

type: "POST",

url: "page_helper.ashx",

data: "name=JS&pid=" + $(this).attr("id") + jsparam(),

success: function (html) {

alert(html);

},

error: function () {

alert("服务器繁忙,请稍后再试!");

});

}

});

这次奇迹出现了,Ajax返回的按钮单击事件被获取到了,下面的Ajax异步过程也调用成功了,那种喜悦不能言表。

如果我放弃了这次求助,以后遇到同样的问题,我可能换一种思路,会用a标签代替按钮,跳转到另一界面,操作起来太麻烦了,哪个用户见到这样的效果都会恶心至极,同学这样的帮助岂三天三夜的宴请足矣?

相关文章

1a1b05c64693fbf380aa1344a7812747.png

ajax是asynchronous javascript and XML的简写,中文翻译是异步的javascript和XML,这一技术能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验2016-11-11

4f55910a645b073bc4fc65dc10dc14bd.png

ajax实现将鼠标放到图标上,下方会显示和该图有关的信息2009-12-12

0ea3c7666119d5615e582f823fb3fad6.png

javascript的编码是和myeclipse一样的为什么还会出现问题,下面为大家介绍下ajax的responseText乱码的问题的解决方法2014-05-05

4f96a78db829b1556ff16de21e013c7a.png

[ASP.NET AJAX]Function对象及Type类的方法介绍...2007-01-01

8cc1031babc6aff2319f1c6af8544aa0.png

下面小编就为大家带来一篇AJAX应用中必须要掌握的重点知识(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-08-08

0c932a99bb7b6f23c937db507070cc7b.png

asp+ajax实现静态页面分页的代码...2007-11-11

cca732bf65a93ed2ec0ac80c638460fe.png

下面小编就为大家带来一篇AJAX实现图片预览与上传及生成缩略图的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-09-09

2d9f31f2af7b675a3d153d2b7f1035a7.png

这篇文章主要介绍了ajax实现简单实时验证功能,需要的朋友可以参考下2017-12-12

b452cee8ec5cd9e58ab98eba17281e59.png

这篇文章主要为大家详细介绍了ajax三级联动的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-05-05

f4838ec7e2d4da28e0b57d4e852dadd4.png

AJAXRequest v0.2...2006-12-12

最新评论

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值