及时总结项目中使用到的知识，知识在于积累。

1.HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.7.1.min.js"" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#btnTest').click(function(){
var html = "";
$.ajax({
type: "post",
url: "dataHandle.ashx",
data: {id:$("#txtID").val()},
dataType: "json",
success: function(data){
if (data.student[0].name != '') {
//$('#divinfo').text(data.student[0].name);
html += '<br><div class="comment">你要找的人:';
$.each(data.student, function(commentIndex, comment){
html += '<h3>' + comment['name']
+ '</h6></div>';
});

$('#divinfo').html(html);
}
else {
$('#divinfo').text("error");
}
}
});
});
});
</script>
</head>
<body>
编号：<input id="txtID" type="text" /><br />
<input id="btnTest" type="button" value="找人" /><br />
<div id="divinfo"></div>
</body>
</html>

2.ashx代码

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "json";
string id = context.Request["id"];
DataSet ds = new DataSet();
using (DataTable dt = new DataTable("students"))
{
//创建列
DataColumn dtc = new DataColumn("name", typeof (string));
dt.Columns.Add(dtc);

dtc = new DataColumn("sex", typeof (string));
dt.Columns.Add(dtc);

dtc = new DataColumn("tel", typeof (Int32));
dt.Columns.Add(dtc);

//添加数据到DataTable
DataRow dr = dt.NewRow();
if (id == "0")
{
dr["name"] = "张三";
dr["sex"] = "男";
dr["tel"] = 54531;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["name"] = "李四";
dr["sex"] = "男";
dr["tel"] = 5731;
dt.Rows.Add(dr);
}
if (id == "1")
{
dr = dt.NewRow();
dr["name"] = "李四";
dr["sex"] = "男";
dr["tel"] = 5731;
dt.Rows.Add(dr);
}
if (id == "2")
{
dr = dt.NewRow();

dr["name"] = "王五";
dr["sex"] = "女";
dr["tel"] = 5868451;
dt.Rows.Add(dr);
}
ds.Tables.Add(dt);
}
string jsonTable = "student";
string strRe = TableToJson(ds.Tables[0], jsonTable);
context.Response.Write(strRe);

}

public string TableToJson(DataTable dt, string jsonName)
{
var jsonBuilder = new StringBuilder();
jsonBuilder.Append("{\"");
//jsonBuilder.Append(dt.TableName.ToString());
jsonBuilder.Append(jsonName + "\":");
jsonBuilder.Append("[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
if (dt.Rows.Count > 0)//表示有数据,则需要删除最后的一个 ,
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}

关于AJAX+HTML5+ASHX进行全静态页面的数据交互的更多相关文章

  1. php文件与HTML页面的数据交互

    注意:首先需要保证本地配置了php开发环境,如WAMP开发环境 WAMP配置:https://www.cnblogs.com/shiyiaccn/p/9984579.html php获取HTML页面返 ...

  2. $Django ajax简介 ajax简单数据交互,上传文件(form-data格式数据),Json数据格式交互

    一.ajax  1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json  2 ajax干啥用的?前后端做数据交互:  3 之前学的跟后台做交互的方式:   -第一种:在浏览器 ...

  3. 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面

    一.引言 接着上一篇,京东个人中心的所有功能数据分析完成之后,现在需要把静态页面完成,实现过程中要用到的技术有:Bootstrap.html5表单新特性等.除此之外,还要利用Node.js的Expre ...

  4. DataTables学习：从最基本的入门静态页面，使用ajax调用Json本地数据源实现前端开发深入学习，根据后台数据接口替换掉本地的json本地数据，以及报错的处理地方，8个例子（显示行附加信息，回调使用api，动态显示和隐藏列...），详细教程

    一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...

  5. HTML5+CSS3静态页面项目-PayPaul的总结

    学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...

  6. HTML5+CSS3静态页面项目-BusinessTheme的总结

    因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...

  7. 静态页面之间的转发与json与ajax做到动态数据

    我们见过很多使用jsp ,php,asp的动态网页技术的网站了,我们知道如果一个网站内容更新频率极低,而内容量不是十分庞大时,这样的网站(一次开发完成后不会需要较多的维护成本)的完全可以使用全部使用静 ...

  8. Node.js的静态页面想通过jQuery的Ajax函数调用远程服务的措施无效

    程序下载:https://files.cnblogs.com/files/xiandedanteng/nodejsMakejqueryAjaxInvalid.rar 在 http://www.cnbl ...

  9. Ajax在静态页面中向指定url发送json请求获取返回的json数据

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. C#核编之X++详解

    重点:当X++单独使用时,就是没有其他符号参与运算,这时X做自增运算,而当X++与其他运算符一起参与运算时,这时的X++因为运算优先级低,所以是最后一个参与运算的,所以看下面代码 ; x=x++;// ...

  2. GitBook是一个命令行工具（Node.js库），我们可以借用该工具使用Github/Git和Markdown来制作精美的图书，但它并不是一本关于Git的教程哟。

    GitBook是一个命令行工具(Node.js库),我们可以借用该工具使用Github/Git和Markdown来制作精美的图书,但它并不是一本关于Git的教程哟. 支持输出多种格式 GitBook支 ...

  3. http://www.cnblogs.com/fczjuever/archive/2013/04/05/3000680.html

    http://www.cnblogs.com/fczjuever/archive/2013/04/05/3000680.html

  4. mysql server advanced 5.6基于oracle linux 6.6的安装

    mysql 安装有两种,rpm安装和源码包安装,两种包都可以从www.mysql.com官网下载,这次我测试下rpm安装方式. 1.安装环境以及mysql版本: 1.1vcenter 虚拟机环境 1. ...

  5. EditPlus 快速去重

  6. jquery1.11 操作checkbox：全选、取消全选、获取选择元素、获取取消选择元素（总结）

    jquery1.11.1版本完成对checkbox的操作 1. 使用属性prop设置选中状态 2.使用:checked和:not(:checked)获取选中的元素 源码: <!DOCTYPE h ...

  7. Scala基础入门－4

    Scala学习——类 简单类和无参方法 class Counter { private var value = 0 // 必须初始化字段 def increment() { value += 1 } ...

  8. android 应用开发对大图片的处理

    一,下载 android下载大图片(例如微博长图片)会出现OOM down掉问题 解决这个问题的办法是下载图片时先得到图片的宽度和高度,如果超出规定限制则对图片进行缩放 关键参数 1. BitmapF ...

  9. fragment之间的信息交互——onActivityResult()不经过Activity

    1.本文讲述如何fragment与fragment之间互传信息,不用使用Activity的onActivityResult()方法 核心思想:FirstFragment获取到SecondFragmen ...

  10. MySQL的三层架构之一----连接层

    1.mysql的服务端可以分为三层,分别是连接层,SQL层,存储层. 2.架构图 3.连接层定义了通信server端与client协议: