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

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. Sql遍历数据库

    Sql遍历数据库 set nocount on ) ) ) set @str='ad' Declare cur_Depart Cursor For select name,id from syscol ...

  2. hibernate异常

    <h1> nested exception is org.hibernate.LazyInitializationException:</h1> stackoverflow:h ...

  3. [MFC]解决回车键 ESC 默认关闭窗口的一般方法

    在一般情况下编写的对话框程序,用户在运行的时候,如果不注意按下了ENTER或者ESC键,程序就会立刻退出,之所以会这样,是因为按下Enter键时,Windows就会自动去找输入焦点落在了哪一个按钮上, ...

  4. linux下socket编程-UDP

    下面是UDP的服务器的代码: /* server.c */ #include <stdio.h> #include <string.h> #include <netine ...

  5. 关于LWIP---UDP

    lwip是一个轻量级的TCP/IP协议栈(Lightweight TCP/IP Stack)实现,最初是瑞士计算机科学学院Adam Dunkels编写的一个应用于无操作系统的嵌入式系统中的TCP/IP ...

  6. OpenRisc-48-or1200的SPRS模块分析

    引言 之前,我们在分析or1200的WB模块时(http://blog.csdn.net/rill_zhen/article/details/10220619),介绍了OpenRISC的GPRS(ge ...

  7. poj1423---求一个大数的位数方法，我猜网站上统计输入字符少于多少位的那个算法

    法一:对一个数求它的对数,+1取整为其位数 问题转化为int (log10(N!)+1),对数性质log10(N!)=log10(N)+log10(N-1)+...+log10(1) /*用log10 ...

  8. Android UI SurfaceView的使用-绘制组合图型，并使其移动

    绘制容器类: //图形绘制容器 public class Contanier { private List<Contanier> list; private float x=0,y=0; ...

  9. Linux学习之十一、环境变量的功能

    环境变量的功能 可以利用两个命令来查阅,分别是 env 与 export 呢! 范例一:列出目前的 shell 环境下的所有环境变量与其内容. [root@www ~]# env SHELL 告知我们 ...

  10. c++多态的简单理解

    基类中有一个抽象函数 很多个子类继承这个基类 要想使用将子类的对象赋值给基类对象,且使用基类对象可以调用到子类对象的方法,那么这个方法必须是在基类中抽象的,子类中实现的.如果基类中这个方法不是抽象方法 ...