今天没有做循环创建显示：可以参考张鑫旭的文章：《基于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. Flume启动运行时报错org.apache.flume.ChannelFullException: Space for commit to queue couldn't be acquired. Sinks are likely not keeping up with sources, or the buffer size is too tight解决办法（图文详解）

        前期博客 Flume自定义拦截器(Interceptors)或自带拦截器时的一些经验技巧总结(图文详解) 问题详情 启动agent服务 [hadoop@master flume-1.7.0]$ ...

  2. vue 浏览器滚动行为

    import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import {routes} ...

  3. python学习，day3：文件的修改

    对文件进行修改,对不起,在原文修改比较难,只能采用循环覆盖的方法 # coding=utf-8 # Author: RyAn Bi f = open('yesterday2','r',encoding ...

  4. 利用java实现一个简单的链表结构

    *博客搬家:初版发布于 2014/07/04 定义: 所谓链表就是指在某节点存储数据的过程中还要有一个属性用来指向下一个链表节点,这样的数据存储方式叫做链表 链表优缺点: 优点:易于存储和删除 缺点: ...

  5. python全栈开发学习_day2_语言种类及变量

    一.编程语言的分类及python相对其他语言的优势 1)三大语言种类及细分 1.机器语言(低级语言):直接用计算能够理解的二进制进行编写,直接控制计算机硬件. 优点:执行效率高. 缺点:开发效率低,跨 ...

  6. Angular material mat-icon 资源参考_File

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  7. SELinux 引起的 Docker 启动失败

    问题描述 Linux OS 版本 CentOS Linux release 7.2.1511 (Core) 启动Docker service docker start 启动失败信息 原因分析 Erro ...

  8. grep练习

    1.查找特定字符串 [root@server3 mnt]# cat passwd root:x:0:0:root:/root:/bin/bash bin:x:1:1:bin:/bin:/sbin/no ...

  9. C#嵌入字体

    1:将字体文件(*.ttf)添加到资源文件里,注意资源的名称 2:在Program.cs文件里声明 using System; using System.Collections.Generic; us ...

  10. 第九次 Scrum Meeting

    第九次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/14 19:00 60min 新主楼F座2F 附Github仓库:WEDO 例会照片 工作情况总结(4.14) ...