mui.ajax()和asp.net sql服务器数据交互最终版

Posted 2020-09-25 魔兽IT男

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();
}

}