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

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. 使用VS2003 发送Email

    使用VS2003发送Email与之后VS2005版本及以上VS版本不一样,记录一下, 需要引用using System.Web.Mail; public void SendEmail() { try ...

  2. L8_2

    4.留下pid为12345的那个sh进程,杀死系统中所有其它sh进程 ps –ef|grep sh |awk ‘{if($2!=”12345”) {print “kill “$2}}’ >kil ...

  3. Unicode解码、URL编码/解码

    + (NSString *) stringByReplaceUnicode:(NSString *)string { NSMutableString *convertedString = [strin ...

  4. Android 旋转字体 实现（应用角标，如：新，火等关键字）

    在安卓应用中常见应用图标,或者gridview ,listview每个条目上有新,火,等45度旋转的字体,然后一个红色背景,引起用户关注,来一下实现方式: 自定义一个textview,绘制字体的时候, ...

  5. 【转】MUD教程--巫师入门教程4

    我们再次复习一下clean_up()函数返回1的含义,如果clean_up()函数返回1,则MUDOS在这一次的调用时不会做其的任何举动,但到了下一次想调用的时间里,还将再次调用这个对象的clean_ ...

  6. 给新建的Cocos2d-x 3.X的Win32工程添加CocoStudio库

    1.我们在VS中找到"解决方案资源管理器", 在解决方案"HelloCocos"上点击右键, 选择添加现有项目. 在弹出的对话框中选择************* ...

  7. 获取Json对象的长度或计数

    最近又开始写博客了.因为最近的工作又开始与技术方面接口了.现在在开发WEB的时候,经常会遇到JSON对象的传递,JSON是个好东西,但是它却没有提供一些简单便捷的处理方法,其中获取JSON对象的长度就 ...

  8. 4x4矩阵键盘扫描

    4x4矩阵键盘扫描 Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架 ...

  9. oc block基本使用

    // // main.m // block基本使用 // // Created by Ymmmsick on 15/7/21. // Copyright (c) 2015年 Ymmmsick. All ...

  10. iOS UITableViewCell透明度 和 cell文字居中

    1.创建UITableViewCell时,的模式用UITableViewCellStyleValue1时,透明度直接将UITableView的透明度设置以下就搞定拉,但是文字居中难以实现. 2.创建U ...