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

}

时间: 2024-10-24 07:32:48

mui.ajax()和asp.net sql服务器数据交互【3】最终版的相关文章

TCP移动端跟服务器数据交互

同一台笔记本下的客户端和服务端 TCPClient 客户端: //  RootViewController.h#import <UIKit/UIKit.h>#import "AsyncSocket.h"  //封装了基于tcp协议的socket编程//tcp协议是位于网络传输层的协议,规定客户端与服务端之间.或者是客户端与客户端之间数据通信的方式//每个客户端或者服务端通过ip地址+端口来标识/*客户端与服务端基于tcp协议进行数据通信 *1.客户端需要通过ip+端口连接指

php +ajax +sql 实现数据交互

1.首先新建个sql表,表内容如上所示: 2.新建个公用文件conn.php来链接数据库: <?php header("Content-Type:text/html;charset=utf8");//申明编码格式 $conn=mysql_connect("localhost","root","aaaaaa") or die("数据库连接错误".mysql_errno());//连接sql mysql_

web开发中前端页面是如何跟后端服务器数据交互的

本文链接:https://blog.csdn.net/kangkanglhb88008/article/details/84446173后端服务器一般是指servlet容器,用于执行java源程序常见的网页有html,htm,shtml,asp,aspx,php,jsp等格式前两个常用于静态网页,后面几个常用于动态网页.这里前端网页以比较常见的 xx.html 和 xx.jsp 网页作为介绍,其它类似 一.静态页面xx.html如何跟后台交互:先来看一个最简单的登陆界面源代码  <body> 

前台与服务器数据交互乱码问题终极解决

开发中遇到乱码问题真是一个烦.今天特来总结一下 1.post方式提交数据中文乱码处理 post方式提交的数据乱码问题较容易解决,一般将服务器端的编码改为和前台页面一样就行了.比如页面jsp是utf-8,那么后台就 request.setCharacterEncoding("UTF-8"); 2.get方式提交和link链接提交 这两种方式都是直接把参数拼在url后面传到服务器的,他们走URI 解决方法: (1)修改tomcat配置文件server.xml,在Connector中修改UR

jQuery使用ajax()方法加载服务器数据

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为: jQuery.ajaxSetup([options])或$.ajaxSetup([options]) 可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值. 例如,先调用ajaxSetup()方法设置全局的Ajax选项值,再点击两个按钮,分别使用ajax()方法请求不同的服务器数据,并将数据内容显示在页面,如下图所示: 在浏览器中

关于纯xmlhttprequest请求服务器数据

今天我们的web技术已经相当的完善, 各种前端框架如jquery或者再深一点的工具APIcloud 的使用极大的方便了我们的开发工作. 今天我要分享一个纯javascript的方式来解决请求服务器数据或者异步请求数据来交互的方式. 因为我们的项目前端是ThunderAPP开发的android和IOS移动客户端, 使用完全封闭的APIcloud, 请求的形式都是AJAX api.ajax({ url : urlConstant.baseUrl + urlConstant.getUserMsgUrl

SQL Server数据全同步及价值分析[终结版]

SQL Server数据全同步[终结版] 版权全部.转载请注明出处.谢谢! 经过两天的同步编写和測试.出了第一个Release版本号: 1. 本函数仅支持单向同步.即从一个主数据库想多个从数据库同步 2.主数据库的不论什么增删改都会同步到全部从数据库上 3. 最重要的一点:同步数据库的价值所在:当主数据库server不可用时,程序能够使用其它从数据库或者备用数据库,这对于未来公有云和私有云应用具有重大价值! 代码: <span style="font-size:18px;">

使用Jquery.AJAX方法和PHP后台数据交互小结

使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正确. 第二:在传输数据时,传输的数据格式是否正确. 第三:我遇到过 200 但是执行的是AJAX方法的错误方法,我总结了一下,一般都是PHP的数据格式不正确,所以,当遇到200 error时候,应该认真,仔细的检查PHP传输的数据格式是否争取,由于JSON的特性,所以,使用JSON的时候对数据格式规

mui.ajax与服务器(SpringMVC)传输json数据

跨域问题 PC端为了安全,所以禁止跨域.而我使用mui做移动web时,难免会使用pc浏览器进行调试.mui.ajax是允许跨域的.为了可以调试成功,需要对浏览器进行设置及.以360急速浏览器为例,设置如下: 即在目标后添加 --disable-web-security(前面有空格) 前端设置 <script type="text/javascript" charset="UTF-8"> regInfo = {name:'wuchao',password: