今天没有做循环创建显示：可以参考张鑫旭的文章：《基于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. Numpy随机数(一):超几何分布

    超几何分布 产品抽样检查中经常遇到一类实际问题,假定在N件产品中有M件不合格品,即不合格率 . 在产品中随机抽n件做检查,发现k件不合格品的概率为 ,k=0,1,2,...,min{n,M}. Num ...

  2. JavaWeb学习笔记（二十二）—— 过滤器filter

    一.什么是过滤器 过滤器filter是JavaWeb三大组件之一,它与Servlet很相似!不过过滤器是用来拦截请求的,而不是处理请求的.WEB开发人员通过Filter技术,对web服务器管理的所有w ...

  3. QRegExp

    这段代码会越界,百思不得七姐(过了N久时间 之后^^)原来是把i写成了1  --! //#if 0 QRegExp re1("AT+CGATT?"); QRegExp re2(&q ...

  4. vue-cli 启动过项目步骤

    一. 安装 node.js 安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功. 二.安装webpack npm install webpack - ...

  5. vue开发的一些设置以及技巧

    引入其它css样式   需要加~   @找到的是src目录 对于常用的路径可以设置别名     @代表src                  常用的地址在webpack.base.conf.js中 ...

  6. 用hashmap实现redis有什么问题

    1.容量问题 hashmap是有最大容量的 2.时效问题 redis可以持久化,也可以定时时间 hashmap不可以持久化 3.线程并发问题 hashmap不是线程安全的(并且:多线程同时调用hash ...

  7. Python学习 day14

    一.生成器函数进阶 1.最后一个yield后的代码 先看示例: def generator(): print(123) yield 'a' print(456) yield 'b' print(789 ...

  8. (转)CentOS7 搭建LVS+keepalived负载均衡（一）

    原文:http://blog.csdn.net/u012852986/article/details/52386306 CentOS7 搭建LVS+keepalived负载均衡(一) CentOS7 ...

  9. Robot Framework（AutoItLibrary安装）

    RobotFramework下安装AutoItLibrary库 1.安装pythonwin32 在下载地址:http://sourceforge.net/projects/pywin32/files/ ...

  10. 在Xcode中手动添加pch文件

    在Xcode中手动添加pch文件: 一: 在工程中新建.pch文件,pch文件名通常用工程名字命名: 二: 在Targets->build Settings->Prefix Header ...