开发者社区> 好1234> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Ajax叠加(Ajax返回数据用Ajax发出)

简介:               最近在做人事管理系统的一个签到功能,首先是把部门当做参数,把参数用Ajax发送到数据库进行查询,然后以表格形式动态生成员工信息到返回页面的Div里,表格最后的一列是签到按钮,这时我想用JQuery继续获取被点击的“签到”按钮,然后...
+关注继续查看

      

       最近在做人事管理系统的一个签到功能,首先是把部门当做参数,把参数用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标签代替按钮,跳转到另一界面,操作起来太麻烦了,哪个用户见到这样的效果都会恶心至极,同学这样的帮助岂三天三夜的宴请足矣?

  


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JQuery+ajax实现类似百度搜索自动匹配功能
JQuery+ajax实现类似百度搜索自动匹配功能
20 0
在jQuery中使用AJAX-图书管理的请求和传送
为什么要在jQuery中使用AJAX呢?不用想,肯定是因为浏览器中提供的XMLHttpRequest用法较为复杂,所以jQuery对“小黄人”进行的封装,提供了一系列的AJAX相关的函数,降低了我们使用AJAX的难度,我们今天正式来学习jQuery中发起AJAX请求最常用的三个方法: $.get()            => 从服务器获取数据 $.post()          => 向服务器上传数据 $.ajax()           => 可以获取数据/上传数据
7 0
jQuery Ajax 简单的实现跨域请求
jQuery Ajax 简单的实现跨域请求
127 0
+关注
好1234
在PHP技术圈摸爬滚打四五载,经历了高并发、大数据项目的各种坑,不断的在坑中打磨成长。热衷技术领域:Yii2 、 Mysql 、Redis 、ElasticSearch 、Nginx、设计模式、分布式存储、分布式编程,对面向对象编程有比较独到的见解,重视团队协作。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载