Ajax和Json实现后台传集合给前台并赋值文本框-----Ajax\Json\JQuery
功能:放两个文本框和一个确定按钮,确定按钮绑定点击事件,点击确定就加载后台数据库中的数据,显示在文本框中。
基础知识:JQuery ajax异步 .eval() .each() json数据
1、HTML文件
<div id="Text"> <input type="text" id="comment1" name="t_A21" numberID="one" value="" /> <input type="text" id="comment2"name="t_A22" numberID="one" value="" /> <input type="button" class ="button1" onclick="showSendDialog('divOutPutSelcet')" >确定</intput> <input type="text" id="hidcomment" value="321" /> </div>
2、JS文件
function(obj){ $.ajax({ url:"相对路径/xxx.ashx", global:false, dataType:"json", data:{"FunctionType":"Comment","PrimaryKey":$("#hidcomment").val()},//给后台用的参数 success里面不能用 success:function(data){ var result = eval(data.Data); var numberId = "one" var inputList = $("#Text").find("input[numberID='" + numberID+ "']"); //理论上id不能重复 如果重复可以用 $("#Text #txtComment")定位 $(inputList).each(function(){ for (var i = 0; i < result.length; i++) { var tempCode = $(this).attr("name").substring(2,5); if (result[i].LineCode == tempCode) {//result[i].LineCode后台数据库LineCode字段与前台文本框name值2-5位相一致 $(this).val(result[i].ItemValue)//数据库中字段ItemValue } }); /另一种写法*$("#Text").find("input[numberID='" + numberID+ "']").each(function () {}*/ }, error:function(str){ alert(str.Message); } }); }
3、后台xxx.ashx
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string FunctionType = context.Request["FunctionType"].ToString(); switch (FunctionType) { case "Comment": HttpContext.Current.Response.Write(GetComment()); break; } } public string GetComment() { try { string primaryKey= HttpContext.Current.Request["PrimaryKey"]; EnterpriseCommentBLL ecBll = new EnterpriseCommentBLL();//业务逻辑层 EnterpriseCommentModel ecModel = efcBll.GetModel(orderId);//Model类库 return new PageMessageEx(true, "成功传递信息", efcModel).ToString();//放在App_Code中的PageMessageEx.cs文件封装了一个方法,.ToString()是封装好的转换为Json数据的属性 } catch (Exception ex) { return new PageMessage(false,ex.Message).ToString();//放在App_Code中的PageMessage.cs文件封装了一个方法,.ToString()是封装好的转换为Json数据的属性 } }
4、PageMessage.cs 和PassageMessageEx.cs(放在App_Code)
(1)PageMessage
using System; using Newtonsoft.Json; /// <summary> /// 为服务器端给页面的ajax调用的返回信息提供数据载体 /// </summary> public class PageMessage { public PageMessage() { } /// <summary> /// 构造一个返回信息对象,并指定操作结果和提示信息 /// </summary> /// <param name="result">操作结果</param> /// <param name="message">提示信息</param> public PageMessage(bool result, string message) { this._result = result; this._message = message; } /// <summary> /// 结果 /// </summary> private bool _result; /// <summary> /// 结果信息描述 /// </summary> private string _message; /// <summary> /// 获取或设置错误结果 /// </summary> public bool Result { get { return _result; } set { this._result = value; } } /// <summary> /// 获取或设置结果信息描述 /// </summary> public string Message { get { return _message.Replace("\r\n", String.Empty); } set { this._message = value; } } /// <summary> /// 返回信息的Json表现形式 /// </summary> /// <returns>Json表现形式</returns> public override string ToString() { return JsonConvert.SerializeObject(this); } }
(2)PageMessageEx (继承PageMessage)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Newtonsoft.Json; /// <summary> ///PageMessageEx 的摘要说明 /// </summary> public class PageMessageEx : PageMessage { public PageMessageEx() { // //TODO: 在此处添加构造函数逻辑 // } public PageMessageEx(bool result, string message, object data) { this.Result = result; this.Message = message; this.Data = data; } /// <summary> /// 数据 /// </summary> private object _data; /// <summary> /// 获取或设置数据 /// </summary> public object Data { get { return _data; } set { _data = value; } } public override string ToString() { return JsonConvert.SerializeObject(this); } }