今天没有做循环创建显示：可以参考张鑫旭的文章：《基于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. 2016级算法第三次上机-C.AlvinZH的奇幻猜想——三次方

    905 AlvinZH的奇幻猜想--三次方 思路 中等题.题意简单,题目说得简单,把一个数分成多个立方数的和,问最小立方数个数. 脑子转得快的马上想到贪心,从最近的三次方数往下减,反正有1^3在最后撑 ...

  2. Python——制作模块

    步骤一:创建包 步骤二:编辑示例模块代码 __init__调用: 步骤三:创建setup.py from distutils.core import setup setup(name="pa ...

  3. linux 查看进程启动时，用户的工作目录

    在linux下查看进程大家都会想到用 ps -ef|grep XXX可是看到的不是全路径,怎么看全路径呢?每个进程启动之后在 /proc下面有一个于pid对应的路径例如:ps -ef|grep pyt ...

  4. 决策树C4.5算法——计算步骤示例

    使用决策树算法手动计算GOLF数据集 步骤: 1.通过信息增益率筛选分支. (1)共有4个自变量,分别计算每一个自变量的信息增益率. 首先计算outlook的信息增益.outlook的信息增益Gain ...

  5. [转]asp:ScriptManager

    概述 ScriptManager 控件管理用于 Microsoft ASP.NET AJAX 页面的客户端脚本.默认情况下,ScriptManager 控件将 Microsoft AJAX 库的脚本与 ...

  6. Python爬虫抓取某音乐网站MP3（下载歌曲、存入Sqlite）

    最近右胳膊受伤,打了石膏在家休息.为了实现之前的想法,就用左手打字.写代码,查资料完成了这个资源小爬虫.网页爬虫, 最主要的是协议分析(必须要弄清楚自己的目的),另外就是要考虑对爬取的数据归类,存储. ...

  7. Robot Framework环境搭建（问题总结）

    Robot Framework+python+wxpython+robotframework-ride+library环境搭建问题总结 因为robotframework的兼容性问题要求很严格,小编在环 ...

  8. selenium+Python(alert 、confirm 、prompt 的处理)

    alert\confirm\prompt 弹出框操作主要方法有: text  返回 alert/confirm/prompt 中的文字信息 accept  点击确认按钮 dismiss 点击取消按钮, ...

  9. IO流（一）字节流

    1:io流体系:对数据进行读写操作.所以IO不是读就是写咯. 2:io流的相关的类:java.io包. 有关IO的操作都会产生IOException异常 3:io:参照物是程序, i:input.进来 ...

  10. HTML5跨域请求--POST方式

    var xmlHttp; // Create the XHR object. function createCORSRequest(method, url) { var xhr = new XMLHt ...