JQuery Ajax 获取数据
前台页面： 对一张进行查询，删除，添加
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<span id="s1"></span>
<input type="button" id="gget" value="获取" />
<div id="tb"></div>
</body>
</html>
<script>
//获取表
$("#gget").click(function () {
//把id为tb的Html清除
$("#tb").html("");
$("#s1").append('<img src="img/Loading2.gif" />');
//get方式传值
$.get("table.ashx", function (data) {
$("#s1").html("");
//把获取的字符串添加到tb中
var dv = "<div>" + data + "</div>";
$("#tb").append(dv);
});
});
//删除脚本
function dd(id) {
$("#tb").html("");
$("#s1").append('<img src="img/Loading2.gif" />');
//把你要删除的ID传过去做删除
$.get("table.ashx", { "id": id }, function (data) {
$("#s1").html("");
var dv = "<div>" + data + "</div>";
$("#tb").append(dv);
});
};
//添加脚本
function ff() {
//如果按钮为添加
if ($("#in").val() == "添加") {
//判断账号不为空
if ($("#name").val().trim()== "") {
alert("账号不能为空");
return;
}
else {
//判断密码不为空
if ($("#pwd").val().trim() == "") {
alert("密码不能为空");
return;
}
//密码账号不为空就做添加
else {
var name = $("#name").val();
var pwd = $("#pwd").val();
var sex = $("#sex").attr("checked"); //获取性别
var admiID = $("#Admin").val();
$.get("table.ashx", { "name": name, "pwd": pwd, "sex": sex, "adminID": admiID }, function (data) {
$("#tb").html("");
var dv = "<div>" + data + "</div>";
$("#tb").append(dv);
});
}
}
}
//如果按钮为编辑
if ($("#in").val() == "编辑") {
//把按钮改为添加
$("#in").val("添加");
//激活控件
$("#name,#pwd,#sex,#Admin").removeAttr("disabled");
} }
</script>
后台页面： 一般处理程序
<%@ WebHandler Language="C#" Class="table" %> using System;
using System.Web;
using DAL;
using System.Data;
using System.Data.SqlClient; public class table : IHttpHandler { public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//如果ID不为空就是做删除
if (context.Request.QueryString["id"]!=null)
{
int id = int.Parse(context.Request.QueryString["id"].ToString());
int r = SQLHelper.ExecuteNonQuery("delete Users where ID=@0", CommandType.Text, id);
if (r>)
{
Common(context);
}
}
else
{
//如果name不为空就做添加
if (context.Request.QueryString["name"]!=null)
{
string name = context.Request.QueryString["name"].ToString();
string pwd = context.Request.QueryString["pwd"].ToString();
bool sex = bool.Parse(context.Request.QueryString["sex"].ToString());
int adminID = int.Parse(context.Request.QueryString["adminID"].ToString());
int i = SQLHelper.ExecuteNonQuery("insert into Users values(@0,@1,@2,@3)", CommandType.Text, name, pwd,adminID,sex );
if (i>)
{
Common(context);
}
}
//都为空就是获取表
else
{
Common(context);
} } }
public void Common(HttpContext context)
{
SqlDataReader dr = SQLHelper.ExecuteReader("select * from Users", CommandType.Text);
string newTable = "<table cellspacing='1' cellpadding='3' id='GridView1' style='background-color:White;border-color:White;border-width:2px;border-style:Ridge;'><tr style='color:#E7E7FF;background-color:#4A3C8C;font-weight:bold;'><th scope='col'>ID</th><th scope='col'>UserName</th><th scope='col'>Password</th><th scope='col'>Sex</th><th scope='col'>AdminID</th><th scope='col'>删除</th></tr>";
//加载 数据行的字符串
while (dr.Read())
{
string sex = "checked='checked'";
if (dr[].ToString().ToLower() == "false")
sex = "";
newTable += "<tr style='color:Black;background-color:#DEDFDE;'><td>" + dr[] + "</td><td>" + dr[] + "</td><td>" + dr[] + "</td><td><span class='aspNetDisabled'><input type='checkbox'" + sex + " disabled='disabled' /></span></td><td>" + dr[] + "</td>" +
"<td><input type='button' onclick='javascript:dd(" + dr[] + ")' value='删除' /></td></tr>";
//<a href='javascript:__doPostBack('GridView1','Delete$0')' style='color:Black;'></a>
}
dr.Close();
//加载 添加行的字符串
newTable += "<tr style='color:Black;background-color:#DEDFDE;'><td></td><td> <input type='text' id='name'"+
" disabled='disabled' /></td><td><input type='password' id='pwd' disabled='disabled' /></td><td><span "+
" class='aspNetDisabled'><input type='checkbox' id='sex' disabled='disabled' /></span></td><td>"+
" <select id='Admin' disabled='disabled' >" +
"<option value='1'>Admin</option>"+
" <option value='2'>Guest</option>"+
"<option selected value='3'>User</option>" +
"</select></td>" + "<td><input type='button' id='in' onclick='javascript:ff()' value='编辑' /></td></tr>";
newTable += "</table>";
//一张完整的表的字符串
context.Response.Write(newTable);
}
public bool IsReusable {
get {
return false;
}
} }
JQuery Ajax 获取数据的更多相关文章
- jquery通过ajax获取数据，控制显示的数据条数
效果图: 现在我们可以先看它的json数据,如图所示: 然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...
- jquery.ajax和Ajax 获取数据
前几天接触了jquery 看到里面ajax的部分,自己也不是很懂,然后有重复看了即便,然后写了一个小功能,分享下...我刚学的.有错误的请指教. 验证用户名是否存在 在checkname_jqajax ...
- jquery ajax获取后台数据后无法输出
今天做ajax获取数据,再浏览器的debugger窗口也看到了数据 ajax代码 $('#userSearch').click(function(){ $.get("loadAllUsers ...
- vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...
- select2 AJAX获取数据
页面效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...
- jquery ajax提交数据给后端
大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...
- node.js之用ajax获取数据和ejs获取数据
摘要:学了node之后有时候分不清前台和后台,今天用ajax和ejs来从后台获取数据,没有数据库,用json数据来进行模拟数据库:来区分前台和后台需要干什么? 一.用ejs获取数据 1.文件目录 2. ...
- vue ajax获取数据的时候，如何保证传递参数的安全或者说如何保护api的安全
https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...
- 获取链接的参数，判断是否是微信打开，ajax获取数据
//获取链接参数function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + " ...
随机推荐
- Hadoop,HBase集群环境搭建的问题集锦(四)
21.Schema.xml和solrconfig.xml配置文件里參数说明: 參考资料:http://www.hipony.com/post-610.html 22.执行时报错: 23., /comm ...
- angularjs基本执行流程
近期温习了下angularjs执行流程,备记下.以便查看. 主要的执行流程例如以下: 1.用户请求应用起始页. 2.用户的浏览器向server发起一次HTTP连接,然后载入index.html页面,这 ...
- Stm32高级定时器(三)
Stm32高级定时器(三) 1 互补输出和死区插入 1.1 死区:某个处于相对无效状态的时间或空间 本来OCX信号与OCXREF时序同相同步,OCXN信号与OCXREF时序反相同步.但为了安全考虑,以 ...
- playbin2 成员
1. playbin2 struct _GstPlayBin { GstPipeline parent; GMutex *lock; GstSourceGroup groups[2]; G ...
- 在struts2的action中操作域对象(request、session)
在struts2的Action中,操作域对象一共有三种方式: 1.ActionContext(与servelt API无关联): //相当于request ActionContext.getConte ...
- 如何把一个表中的部分字段值插入到另一个表中去 这sql吊
Insert into JHAC_TB_CODE(CID,CODE,ADD_TIME,USERID,PRO_CODE,USERNAME) select f_code.FID,f_code.Fcod ...
- Java的一点内容（2）
1 面向对象的三个原则 封装性 封装的基本单元是类(class),类是一个抽象的逻辑结构,而类的对象是一个真实的物理实体:类的目的是封装复杂性,在类内部存在隐藏实现复杂性机制: 封装(encapsul ...
- Win 7 通过事件管理器查看计算机开机关机时间
控制面板-管理工具-事件查看器 视图中开机来源:Kernel-General 事件ID:13 关机来源:Kernel-General 事件ID:12
- hdu 1262寻找素数对
Problem Description 哥德巴赫猜想大家都知道一点吧.我们现在不是想证明这个结论,而是想在程序语言内部能够表示的数集中,任意取出一个偶数,来寻找两个素数,使得其和等于该偶数. 做好了这 ...
- 《APUE》-第五章标准IO库
大多数UNIX应用程序都使用I/O库,本章说明了该库所包含的所有函数,以及某些实现细节和效率方面的考虑.同时需要重点关注标准I/O使用了缓冲的技术,但同时也是因为它的出现,产生了很多细节上的问题. 流 ...