今天没有做循环创建显示：可以参考张鑫旭的文章：《基于HTML模板和JSON数据的JavaScript交互》

1、ashx页面代码

//下面的封装一般框架底层都是写好的：连接 数据库和获取DataTabel

public SqlConnection getcon()
{
//连接本地数据库 server=localhost
string M_str_sqlcon = "Server=(local);Initial Catalog=userlogin ;Uid=sa ;Pwd=sa ;";
SqlConnection myCon = new SqlConnection(M_str_sqlcon);
return myCon;
}

DataTable mytable = new DataTable();

public DataTable gettable(string M_str_sqlstr)
{
SqlConnection sqlcon = this.getcon();
sqlcon.Open();
SqlDataAdapter sqlda = new SqlDataAdapter(M_str_sqlstr, sqlcon);
sqlda.Fill(mytable);
sqlda.Dispose();
sqlcon.Close();
return mytable;
}

/// <summary> 
/// dataTable转换成Json格式 
/// </summary> 
/// <param name="dt"></param> 
/// <returns></returns> 
public static string DataTableToJson(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();

jsonBuilder.Append(dt.TableName);
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("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");

return jsonBuilder.ToString();
}

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "application/json";
string name = context.Request.Params["name"];
string strsql = "select * from login where username like '%" + name +"%'";
DataTable dt = gettable(strsql);
if (dt.Rows.Count > 0 && dt != null)
{
string res = DataTableToJson(dt).ToString();
context.Response.Write(res);
}

}
public bool IsReusable {
get {
return false;
}
}

2、前端页面代码

<body>
<div class="mui-input-row">
<label>账号：</label>
<input id="name" type="text" placeholder="请输入账号">
</div>
<button id="btnLogin" type="button" class="mui-btn mui-btn-blue mui-btn-block">点击获取密码</button>

<div id="div">
这里显示从服务器获取到的数据

</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.ready(function() {
var btnLogin = document.getElementById("btnLogin");
var names = document.getElementById("name");
btnLogin.onclick = function() {
var url = "http://localhost/myStudy/APP/Handler.ashx";
mui.post(url, {
name: names.value,
}, function(data) {
//服务器返回响应，根据响应结果，分析是否登录成功；
var jsonstr = JSON.stringify(data); //将JavaScript值转化为json字符串
var jsonobj = JSON.parse(jsonstr); //将json字符串转化为JavaScript对象
var divinner = document.getElementById("div");
divinner.innerHTML = jsonobj[jsonobj.length-1].title;
}, 'json');
};
});
</script>
</body>

mui.ajax()和asp.net sql服务器数据交互【2】json数组和封装的更多相关文章

  1. mui.ajax()和asp.net sql服务器数据交互【1】

    简单的ajax和asp.net的交互,例如遍历数据,前端显示复杂内容没有添加代码,可自行研究!非常适合懂那么一点点的我们! 实现步骤: 1.APP前端HTML: <div class=" ...

  2. mui.ajax()和asp.net sql服务器数据交互【3】最终版

    1.前端页面 <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-ic ...

  3. UDP协议实现客户服务器数据交互

    UDP协议实现客户服务器数据交互 按照往常一样将今天自己写的题目答案写在了博客上习题:客户端循环发送消息给服务端,服务端循环接收,并打印出来,直到收到Bye就退出程序. package network ...

  4. 在ssm框架中前后台数据交互均使用json格式

    前后台数据交互均使用json. 框架ssm(spring+springmvc+mybatis) @RequestBody注解实现接收http请求的json数据,将json数据转换为java对象,注解加 ...

  5. 前端数据交互之json&ajax

    1.json json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据 ...

  6. TCP移动端跟服务器数据交互

    同一台笔记本下的客户端和服务端 TCPClient 客户端: //  RootViewController.h#import <UIKit/UIKit.h>#import "As ...

  7. Appcn 移动开发 前台与服务器数据交互

    第一次写.嘿嘿. 言归正传,这几天开始学习移动开发,使用的是Appcan平台.Appcan平台采用HTML5+CSS3做开发 实现跨平台,正好可以满足我们的业务需求. Appacn和数据库进行交互的方 ...

  8. unity用json和服务器数据交互

    第一种类型:服务器json数据是个对象 /// <summary> /// 获取用户信息初始化信息 /// </summary> void InitUserMessage() ...

  9. 第88节：Java中的Ajax和ASP.NET和TCP/IP 教程和JSON

    第88节:Java中的Ajax和Jquery ajax是什么?有什么用?原理,怎么用? ajax是asynchronous javascript and xml(异步javascript和xml),是 ...

随机推荐

  1. Maven web项目(简单的表单提交) 搭建(eclipse)

    我们将会搭建一个,基于Maven管理的,具有简单的表单提交功能的web项目,使用DAO--service--WEB三层结构,服务器使用Tomcat 1 项目基本结构的搭建 左上角File---> ...

  2. RN_ 错误整理

    1. this.setState is not a function   或者 this.setState is undefined 在 constructor 中加入 this.select = t ...

  3. HTML中title前面小图标和网站收藏现实的图标

    网站上的logo实际上是一个“favicon.ico”图片.实现步骤:第一步:制作favicon.ico,大小为16*16毫米:第二步:将“favicon.ico”放到项目的根路径下. 第三步:在所有 ...

  4. mongodb与python随手记

    在python中使用pymongo连接mongodb数据库. 基本代码如下: from pymongo import MongoClient client = MongoClient('127.0.0 ...

  5. pip和conda安装源更改

    pip和conda安装源更改 python模块安装,使用国内源可以提高下载速度. pip源更改: pip源有好几个,我一直用的清华的pip源,它5分钟同步一次. 临时使用: pip 后加参数 -i h ...

  6. 动态时间规整DTW(Dynamic Time Warping )

    动态时间规整DTW(Dynamic Time Warping ) 原文:https://blog.csdn.net/raym0ndkwan/article/details/45614813 算法笔记- ...

  7. Eclipse for J2EE+tomcat配置上的一些问题

    之前下载了一个eclipse基础版本,学习之前没有什么感觉不方便的地方,方式学习到web编程时,就出现问题了,因为不支持创建web项目. 于是下载了一个Eclipse for J2EE版本的工具,但是 ...

  8. JavaScript Ajax 实现学习

    创建异步对象: function createXmlHttp(){ var xhobj=false; try{ xhobj=new ActiveXObject("Msxml2.XMLHTTP ...

  9. Android开发环境搭建步骤-【Android】

    本教程是android开发环境在windows下的安装配置,经本人测试完全正确无误.这个教程是史上最详细的android开发环境搭建教程. 工具/原料 Eclipse 3.7.0.Java Jdk6. ...

  10. cg教程

    Unity对shader的重点支持是cg语言,因为具有跨平台性质 Cg语言和CPU 上的C语言是很相似的,只不过有了自己的一套关键字和函数库 Cg语言的权威和入门教程在NVID1A的官方网站上,如果以 ...