今天没有做循环创建显示：可以参考张鑫旭的文章：《基于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. nginx下重写隐藏index.php文件

    location / { root /项目目录/; index index.php; if (-f $request_filename/index.php){ rewrite (.*) $1/inde ...

  2. linux 常用命令手册

    命令 功能说明 线上查询及帮助命令(2个) man 查看命令帮助,命令的词典,更复杂的还有info,但不常用. help 查看Linux内置命令的帮助,比如cd命令. 文件和目录操作命令(18个) l ...

  3. 01. css sprite是什么，有什么优缺点？

    1.css sprite是什么,有什么优缺点? 通常被意译为“CSS图像拼合”或“CSS贴图定位” 1)CSS Sprites的优点 利用CSS Sprites能很好地减少网页的http请求,从而大大 ...

  4. C# 获取类名

    1.获取C#类中类名 System.Reflection.MethodBase.GetCurrentMethod().DeclaringType.Name; 2.获取C#类中类名(包含命名空间) Sy ...

  5. apache2 + django

    参照: http://blog.topspeedsnail.com/archives/7828 注意,当django安装在虚拟环境下时,配置文件里面需要有python-home 指向虚拟环境 WSGI ...

  6. 026-log4j配置文件模板

    模板一: ### direct log messages to stdout ### log4j.appender.stdout=org.apache.log4j.ConsoleAppender lo ...

  7. 【C语言】-指针

    本文目录 直接引用 一.什么是指针? 二.指针的定义 三.指针的初始化 四.指针运算符 五.指针的用途举例 六.关于指针的疑问 说明:这个C语言专题,是学习iOS开发的前奏.也为了让有面向对象语言开发 ...

  8. WPF事件中的sender就是事件源

    可以看到wpf中所有的事件都是这个格式: private void btnTest_Click(object sender, RoutedEventArgs e)  { Button btn = (B ...

  9. 冀永楠：OCR的应用锦集及背后技术

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云加社区技术沙龙 发表于云+社区专栏 演讲嘉宾:冀永楠,现为腾讯云大数据AI产品中心高级研究员.负责了腾讯云与华星光电等多个图像AI项 ...

  10. Ubuntu apache

    Linux系统为Ubuntu 1. 启动apache服务 # /etc/init.d/apache2 start 2. 重启apache服务 # /etc/init.d/apache2 restart ...