mui.ajax()和asp.net sql服务器数据交互【3】最终版
1、前端页面
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">企业资质查询</h1>
</header>
<div class="mui-content">
<form class="mui-input-group" accept-charset="UTF-8">
<div class="mui-input-row">
<label>企业名称：</label>
<input id="entName" type="text" placeholder="请输入企业名称">
</div>
<div class="mui-input-row">
<label>证书编号：</label>
<input id="entCertificate" type="text" class="mui-input-clear" placeholder="请输入企业证书编号">
</div>
<button type="button" id="btn" class="mui-btn mui-btn-green mui-btn-block">查询</button>
</form>
<div id="data">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">企业名称：
<span class="targetid">
</span>
</li>
<li class="mui-table-view-cell">企业类别：
</li>
</ul>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
var url = "http://localhost/SUPEgz/App/search/ent.ashx";
var entname = document.getElementById("entName");
var card = document.getElementById("entCertificate");
document.getElementById("btn").addEventListener('tap', function() {
showdata();
});
function showdata() {
$.ajax({
type: "post",
url: url,
data: {
name: entname.value,
card: card.value
},
success: function(data) {
mui.toast('链接成功');
//console.log(typeof data); //获取到的数据为字符串string
var jsonobj = JSON.parse(data); //将数据转化为JavaScript对象
var inner = document.getElementById("data");
inner.innerHTML = "";
for(var i = 0, len = jsonobj.tdata.length; i < len; i++) {
inner.innerHTML += '<div class="mui-card"><ul class="mui-table-view"><li class="mui-table-view-cell">企业名称：<span class="targetid">' + jsonobj.tdata[i].FEntName + '</span></li><li class="mui-table-view-cell">企业类别：' + jsonobj.tdata[i].FEntTypeName + '<a class="look mui-active">查看详情</a></li></ul></div>';
}
$("#data .mui-card").click(function() {
var i = $(this).index(); //这里应该是获取点击的a的下标,暂时用的div
var baseUrl = 'ent_info.html';
var targetid = document.getElementsByClassName("targetid")[i].innerHTML;
var url = mui.os.plus ? baseUrl : baseUrl + '?targetid=' + targetid;
mui.openWindow({
url: url,
extras: {
targetid: targetid
}
})
})
}
})
};
</script>
2、ashx页面
<%@ WebHandler Language="C#" Class="ent" %>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using CeeyiData;
using Approve.EntityBase;
using Approve.Common;
public class ent : IHttpHandler {
CeeyiDB db = new CeeyiDB();
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "application/json";
string name = context.Request.Params["name"];
var v = (from t in db.T_Ent_BaseInfo
where t.FEntName.Contains(name)
select new
{
t.FEntName,
t.FEntTypeName,
t.FLicenseNo,
}).Take(4);
string s = "{\"tdata\":" + JsonHelper.Convert2Json(v.ToList());
s += "}";
Write(s);
}
public bool IsReusable {
get {
return false;
}
}
/// <summary>
/// 返回结果（专门针对jquery请求返回值处理）
/// </summary>
/// <param name="s"></param>
private void Write(string s)
{
//处理跨域文件头
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "X-Requested-With");
HttpContext.Current.Response.AddHeader("P3P", "CP=CAO PSA OUR"); //解决IE下SessionID丢失的问题
//返回格式
HttpContext.Current.Response.ContentType = "application/Json";
//jquery回调方法
//string callbackfun = Request["callbackfun"];
HttpContext.Current.Response.Write(s);
HttpContext.Current.Response.End();
}
}
最新文章
- MVC4做网站后台:用户管理 ——用户组补充
- 犀利点评:csdn某文<第一次创业还是失败了---分享失败的经验>
- @MappedSuperclass的用法
- Linux命令（17）du 查看文件和目录磁盘使用情况
- mac下配置eclipse的hadoop环境
- java线程（1）-线程同步
- vector -1
- org.apache.jasper.JasperException: java.lang.ClassCastException
- 关于default的位置问题：default放在前面
- Visual Studio 20周年软件趋势随想
- 查看linux版本相关命令
- 为何没有asia/beijing时区？
- Android 如何避免运行时奔溃
- Confluence 6 白名单允许进入和禁用
- C++11模版元编程的应用
- GIL 相关 和进程池
- 《centos系列》git的安装
- AAAI 2018 论文 | 蚂蚁金服公开最新基于笔画的中文词向量算法
- Flink安装、高可用性
- sql when null 判断