无刷新获取字符串:

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 获取数据代码的更多相关文章

  1. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

  2. jquery通过ajax获取数据,控制显示的数据条数

    效果图: 现在我们可以先看它的json数据,如图所示:                然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...

  3. jquery.ajax和Ajax 获取数据

    前几天接触了jquery 看到里面ajax的部分,自己也不是很懂,然后有重复看了即便,然后写了一个小功能,分享下...我刚学的.有错误的请指教. 验证用户名是否存在 在checkname_jqajax ...

  4. node.js之用ajax获取数据和ejs获取数据

    摘要:学了node之后有时候分不清前台和后台,今天用ajax和ejs来从后台获取数据,没有数据库,用json数据来进行模拟数据库:来区分前台和后台需要干什么? 一.用ejs获取数据 1.文件目录 2. ...

  5. vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全

    https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...

  6. 获取链接的参数,判断是否是微信打开,ajax获取数据

    //获取链接参数function GetQueryString(name) {    var reg = new RegExp("(^|&)" + name + " ...

  7. select2 AJAX获取数据

    页面效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  8. 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

    小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...

  9. [NodeJs] 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

    小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...

随机推荐

  1. Adroid APPIUM实例步骤

      1.下载eclipse 2.安装java 配置环境变量 3.eclipse 安装adt android development tools 4.android sdk manager 安装tool ...

  2. jQuery限制文本框只能输入正整数

    //限制键盘只能按数字键.小键盘数字键.退格键 $("#txtQty").keydown(function (e) { var code = parseInt(e.keyCode) ...

  3. Android自定义控件(一)——开关控件

    Google 在 API 14 开始才新增了Switch 控件. 因此,我们可以选择自己封装一个Switch . 效果如图: View主要代码: public class SwitchView ext ...

  4. BUG出现的地方真的令我这个测试新人想象不到

    今天上班,仍然在等待下一阶段项目的研发完成. 没有正式测试任务的我,作为新手肯定要趁着这个时间好好学习了,偶尔再拿出公司已经上线发布的APP来到处看看. 就在这偶尔的情况下让我发现了一个在正式测试时根 ...

  5. CSMA/CD协议

    为了通信的简便,以太网采取了两种重要的措施: 第一:采用较为灵活的无连接的工作方式,即不必先建立连接就可以直接发送数据: 第二:以太网对发送的数据帧不进行编号,也不要求对方发回确认. 因此,以太网提供 ...

  6. MVC5移除不常用Nuget命令

    ---移除JQuery.* 和bootstartp Uninstall-Package bootstrap Uninstall-Package Microsoft.jQuery.Unobtrusive ...

  7. 客户Oracle数据库在插入数据的时候报超出最大长度的错误(规避风险)

    背景: 项目使用oracle数据,在开发环境测试一些正常.项目部署到客户的服务器上后,系统在添加数据的时候报错.输出错误信息,发现是“超出最大长度”的异常. 但是按照数据库的设计,添加的数据应该在允许 ...

  8. HelloCharts pie饼图绘制

    先引用hellocharts-library-<version>.jar 然后在layout中设置 <lecho.lib.hellocharts.view.PieChartView ...

  9. Opencv 函数

    1.cvLoadImage:将图像文件加载至内存: 2.cvNamedWindow:在屏幕上创建一个窗口: 3.cvShowImage:在一个已创建好的窗口中显示图像: 4.cvWaitKey:使程序 ...

  10. Java菜鸟学习笔记--面向对象篇(十五):Wrapper Class包装类

    什么是包装类? 在Java里一切都是对象,除了Java中的基本数据类型(byte,short,int,long,char,float,double,boolean)不是面向对象的,这在实际使用时存在很 ...