Ajax 获取数据代码
无刷新获取字符串:
Html网页中:
<script>
//定义异步对象
var xmlHttp;
//封装方法
function CreateXMLHTTP() {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
window.onload = function () {
document.getElementById("name").onclick = function ()
//创建异步对象
CreateXMLHTTP();
//通过事件来接受服务器返回
xmlHttp.onreadystatechange = function () { //判断状态
if (xmlHttp.readyState==&& xmlHttp.status==) {
//获取你要的数据
var data = xmlHttp.responseText;
document.getElementById("d1").innerText = data;
}
}
//设置将要访问的服务器地址和方式
xmlHttp.open("get", "Data.ashx"); //发送异步请求
xmlHttp.send();
}
}
</script>
</head>
<body>
<div id="d1"></div>
<input type="button" id="name" value="获取数据" />
</body>
提供数据页:Data.ashx中:
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//线程 过两秒在获取数据
System.Threading.Thread.Sleep();
//你提供的数据--》字符串
context.Response.Write("这你要的数据");
}
-----------------------------------------------------------------------------------------------------------
无刷新获取一张表,然会在静态网页中无刷新删除数据
Html网页中:
<body>
<input type="button" id="name" value="获取表" />
<div id="d1"></div>
</body>
</html>
<script>
var xmlHttp;
function CreateHTTP() {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//把相同的代码封装下
function Common() {
CreateHTTP();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == && xmlHttp.status == ) { //接受数据--》一张表的字符串
var table = xmlHttp.responseText;
//显示在网页中
document.getElementById("d1").innerHTML = table;
}
}
}
document.getElementById("name").onclick = function () {
Common();
xmlHttp.open("get", "Table.ashx");
xmlHttp.send();
}
//删除链接的脚本
function dd(id) { //id传过来的删除的ID
Common();
xmlHttp.open("get", "Table.ashx?id=" + id);
xmlHttp.send()
}
</script>
提供数据页:Table.ashx中
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//如果没有传值代表获取一张表
if (context.Request.QueryString["id"]!=null)
{
//得到需要删除的ID
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
{
Common(context);
}
}
//获取一张表的字符串
public void Common(HttpContext context)
{
SqlDataReader dr = SQLHelper.ExecuteReader("select * from Users", CommandType.Text);
string newTable = "<table cellspacing='0' rules='all' border='1' id='GridView1' style='border-collapse:collapse;'><tr><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='checke'";
if (dr[].ToString().ToLower() == "false")
{
sex = "";
}
newTable += "<tr><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>"+
//javascript:dd("+dr[0]+") 这是个脚本在静态网页中实现
"<a href='javascript:dd(" + dr[] + ")'>删除</a></td></tr>";
}
dr.Close();
newTable += "</table>";
context.Response.Write(newTable);
}
Ajax 获取数据代码的更多相关文章
- vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...
- jquery通过ajax获取数据,控制显示的数据条数
效果图: 现在我们可以先看它的json数据,如图所示: 然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...
- jquery.ajax和Ajax 获取数据
前几天接触了jquery 看到里面ajax的部分,自己也不是很懂,然后有重复看了即便,然后写了一个小功能,分享下...我刚学的.有错误的请指教. 验证用户名是否存在 在checkname_jqajax ...
- 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 + " ...
- select2 AJAX获取数据
页面效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...
- 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库
小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...
- [NodeJs] 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库
小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...
随机推荐
- class 类(3) 继承
继承(Inheritance)是面向对象软 件技术当中的一个概念.如果一个类别A“继承自”另一个类别B,就把这个A称为“B的子类别”,而把B称为“A的父类别”,也可以称“B是A的超类”. 继承可以使得 ...
- jQuery插件开发 格式与解析
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...
- 配置linux中文
1.~/.bash_profile文件添加一下内容并执行source ~/.bash_profile export NLS_LANG=AMERICAN_AMERICA.ZHS16GBK 2./etc ...
- vsim生成VCD波形文件(verilog)
Vsim(ModelSim)生成VCD波形文件(verilog) 两种方法 方法一: 调用ModelSim自己的命令生成,仿真脚本中加入如下一句即可 vcd file mytb.vcd 方法二: 调用 ...
- ASP.net button类控件click事件中传递参数
单击Button会同时触发这两个事件,但先执行Click,后执行Command,在button控件中加上参数属性 CommandArgument='' 在click响应函数中可以用以下代码获得传递的参 ...
- MySQL 一些小知识
1. 关于多表查询 我的理解:由于MySQL多表查询时表之间的连接是笛卡尔积的方式,所以尽量少使用多表查询,如果使用则使用嵌套语句 例:说明: `tb_notice_message` 表数量百万级别以 ...
- Windows命令行(DOS命令)教程-4(转载)http://arch.pconline.com.cn//pcedu/rookie/basic/10111/15325_3.html
2. md md是英文make directory(创建目录)的缩写 [功能] 创建一个子目录 [格式] md [C:]path [举例] 用md 建立一个叫做purple的目录 3. cd cd是英 ...
- kmp代码实现
/* kmp彻底理解 next 数组 :用来指导S[i]串 T[j]串 对应字符失配 指导 i 不回溯,即j应该走多少个位置 next[j]:j位置前一个元素 需要 计算某个字符对应的next值,就是 ...
- asp.net mvc 删除栏目、栏目下又有子栏目的处理方式
- BestCoder Round #36 (hdu5199)Gunner(水题)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud Gunner Time Limit: 8000/4000 MS (Java/Oth ...