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标签代替按钮，跳转到另一界面，操作起来太麻烦了，哪个用户见到这样的效果都会恶心至极，同学这样的帮助岂三天三夜的宴请足矣？

赞 (0)

相关推荐

  • ajax请求之返回数据的顺序问题分析

    本文实例分析了ajax请求之返回数据的顺序问题.分享给大家供大家参考,具体如下: ajax请求一个url,php后端处理后,数组为如下格式: 复制代码 代码如下: $a = array( '-1'=> 10 ,'-3' => 2, '0' => '5' ,'-2' => 4); 然后使用php的asort函数对数组按照value进行升序排序后,如下: 复制代码 代码如下: $a = array('-3' => 2, '-2' => 4,'0' => '5', '-

  • jQuery的Ajax接收java返回数据方法

    1.前端Ajax请求如下: $.ajax({ type : "post", //async:false, url : PATH + "/product/selectPicture.action", dataType : "json", success : function(data) { $.each(data,function(k,v){ alert(k +":"+ v); }); } }); 2 其中PATH在jsp页面中

  • SpringBoot结合JSR303对前端数据进行校验的示例代码

    一.校验分类 数据的校验一般分为**前端校验.后端校验** 二.前端校验 前端校验是最为明显的,先说一下: ① HTML 非空校验 如 HTML5 新增的属性required="true",一旦没有填写就输入框就显示红色,具体使用如: <input type="text" id="name" name="name" required="true"/> ② JS 同时在提交表单发送 Ajax请求

  • 使用react实现手机号的数据同步显示功能的示例代码

    本文介绍了使用react实现手机号的数据同步显示功能的示例代码,分享给大家,具体如下: 要求如下 输入框输入内容数据长度大于0,展示出预览信息 光标离开关闭预览信息 预览信息每隔4位插入一个特殊字符_,输入内容不变 限制长度为13位 只允许输入数字(0-9) // Zinput.js import React, { Component } from 'react'; import './Zinput.css' // NOTE: 获取焦点事件 原生onFocus 即可 // NOTE: 离开焦点事

  • MySQL/MariaDB 如何实现数据透视表的示例代码

    前文介绍了Oracle 中实现数据透视表的几种方法,今天我们来看看在 MySQL/MariaDB 中如何实现相同的功能. 本文使用的示例数据可以点此下载. 使用 CASE 表达式和分组聚合 数据透视表的本质就是按照行和列的不同组合进行数据分组,然后对结果进行汇总:因此,它和数据库中的分组(GROUP BY)加聚合函数(COUNT.SUM.AVG 等)的功能非常类似. 我们首先使用以下 GROUP BY 子句对销售数据进行分类汇总: select coalesce(product, '[全部产品]

  • SpringBoot实现统一封装返回前端结果集的示例代码

    在实际项目开发过程中.事实上我们经常用@restcontroller注释的方式,将相当于将返回数据的基本形式统一为JSON格式的数据.但是,由于我们的项目可能是由很多人开发的,所以我们最好将返回的结果统一起来,这样每个人都可以返回相同的数据格式,这不仅规范了代码,也方便了前端人员调用,否则每个人都会按照自己的风格编写,代码会变得非常混乱. 我们如何封装这个结果?我们应该注意返回到前端的数据中包含的信息. 一般来说,首先,这次必须有一个code来表示接口的状态.例如,0表示成功,1表示失败,2表示

  • mybatis查询结果返回至实体类的示例代码

    近期,利用mybatis做一个简单查询,先看主要代码: Service层: package com.example1.service; import java.util.List; import org.apache.log4j.Logger; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.exampl

  • matplotlib实现数据实时刷新的示例代码

    matplotlib实现数据实时刷新的示例代码

    前言 matplotlib是python下非常好用的一个数据可视化套件,网上相关的教程也非常丰富,使用方便.本人需求一个根据实时数据刷新曲线的上位机软件,找了半天,基本上都是使用matplotlib的交互模式,我折腾半天还是没有实现想要的效果,但却通过另一种方法实现了想要的效果. 源码 注释已经很充分,不多赘述,直接看源码. import matplotlib.pyplot as plt import numpy as np import threading import sys from ra

  • Spring Data JPA实现持久化存储数据到数据库的示例代码

    Spring Data JPA实现持久化存储数据到数据库的示例代码

    目录 1.SpringBoot项目整合JPA 1.1 pom.xml依赖 1.2 application配置文件 2.创建实体类 3.启动项目,测试验证 1.SpringBoot项目整合JPA 1.1 pom.xml依赖 <properties> <java.version>1.8</java.version> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &

  • C#实现表格数据转实体的示例代码

    目录 场景 需求 开发环境 开发工具 实现代码 实现效果 场景 在实际开发过程中,特别是接口对接之类的,对于这种需求是屡见不鲜,现在很多在线平台也都提供了像json转实体.sql转实体等.但是很多情况下,我们接收到的其实都是一份接口文档,在文档中利用表格标明了字段的名称.备注.类型等,而关于json什么的都是后来才有的,或者说,传输根本不用json.因此,表格数据能够转成实体类的需求就比较明显了. 需求 所以,综上场景所述,我们需要一个小工具,可以将表格数据直接转换为c#代码,当然,本着通用化的

随机推荐