首页 > 代码库 > C# 对JS解析AJX请求JSON并绑定到html页面的一些心得
C# 对JS解析AJX请求JSON并绑定到html页面的一些心得
在今天在项目的时候，碰到一个小问题 在ashx文件中请求返回的json字符怎样绑定到页面
直接上代码
这是在ashx部分
1 public void ProcessRequest(HttpContext context) 2 { 3 //context.Response.ContentType = "text/plain"; 4 context.Response.ContentType = "application/json"; 5 6 string orderid = context.Request["orderid"].Trim(); 7 string Jsonstr = ""; 8 9 DESEncrypt des = new DESEncrypt();10 string Corderid = des.Encrypt(1, orderid);11 12 OrderInfo order = new OrderInfo();13 order = OrderHelper.GetOrderInfo(Corderid);14 15 //{ "orderid":"orderid",16 //"remark":"remark",17 //"username":"username"18 //}19 string status = "";20 switch (order.OrderStatus)21 {22 case OrderStatus.BuyerAlreadyPaid:23 status = "买家已付款,等待发货";24 break;25 case OrderStatus.Closed:26 status = "订单已关闭";27 break;28 case OrderStatus.Finished:29 status = "订单已完成";30 break;31 case OrderStatus.SellerAlreadySent:32 status = "已送达";33 break;34 case OrderStatus.WaitBuyerPay:35 status = "等待买家付款";36 break;37 }38 39 //获取货物名40 41 OrderSubscript ods = new OrderSubscript();42 ods.OrderId = order.OrderId;43 ods = OrderHelper.GetOrdersSubByID(ods);44 string ordername = ods.ModeName;45 string sku = ods.OrderId.Substring(0, ods.OrderId.IndexOf(‘,‘));46 //获取货物图片47 48 int oid = int.Parse(sku);49 50 string imgurl = ProductHelper.GetProductImg(oid);51 52 Jsonstr += "{\"list\":[{\"OrderId\":\"" + order.OrderId + "\",\"Remark\":\"" + order.Remark + "\",";53 Jsonstr += "\"OrderStatus\":\"" + status + "\",\"OrderDate\":\"" + order.OrderDate + "\",";54 Jsonstr += "\"ShipTo\":\"" + order.ShipTo + "\",\"Address\":\"" + order.ShippingRegion + order.Address + "\",";55 Jsonstr += "\"OrderTotal\":\"" + order.OrderTotal.ToString() + "\",\"ActivityName\":\"" + order.ActivityName + "\",";56 Jsonstr += "\"CompanyName\":\"" + order.CompanyName + "\",\"ModeName\":\"" + ordername + "\",";57 Jsonstr += "\"Image\":\"" + imgurl + "\"}]}";58 59 context.Response.Write(Jsonstr);60 }61 62 public bool IsReusable63 {64 get65 {66 return false;67 }68 }
以上是从数据库中读取数据后放入json字符串中
注意这行代码
1 //context.Response.ContentType = "text/plain";
2 context.Response.ContentType = "application/json";
上面那个是文件自动添加的 下面是改的 如果不修改这行代码，返回的内容就会成为字符串
前台页面代码
<html><head> <title>订单详细</title></head><body> </div> <div class="pxui-list" data-model="radio"> <a>各种信息</a> <div class="pxui-list-con" style="display: none;"> <!-- --> </div> <div style="clear: both; height: 4px; margin: 0; padding: 0px; width: 100%;"> </div> </div> <h3 id="js-attrs-title"> 订单属性</h3> <ul class="attrs" id="li_list"> <li id="li1"></li> <li id="li2"></li> <li id="li3"></li> <li id="li4"></li> <li id="li5"></li> <li id="li6"></li> <li id="li7"></li> <li id="li8"></li> <li id="li9"></li> <li id="li10"></li> <li id="li11"></li> <li id="li12"></li> <li id="li13"></li> <li id="li14"> </li> </ul> <h3> 其他信息<a href="">返回顶部<i class="arrow2-top"></i></a></h3> <ul class="services"> <li id="li21"><i></i>信息1</li> <li id="li22"><i></i>信息2</li> <li id="li23"><i></i>信息3</li> <li id="li24"><i></i>信息4</li> <li id="li25"><i></i>信息5</li> </ul></body></html>
简单贴两句代码
下面就是JS请求部分和处理传回来的JSON
1 <script src="js/jquery-1.9.1.js" type="text/javascript"></script> 2 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 3 <script type="text/javascript"> 4 $(document).ready(function () { 5 //alert(getQueryString("orderid")); 6 //var orderid = getQueryString("orderid"); 7 //aler(orderid); 8 //$.ajax({ 9 // url: "ashx/QueryOrderDetail.ashx",10 // type: ‘post‘, 11 // dataType: ‘json‘,12 // data: { orderid: orderid },13 // success: function (resultData) {14 // alert(resultData);15 //16 // }17 //});18 //alert(getQueryString("orderid"));19 $.post("ashx/QueryOrderDetail.ashx", { orderid: getQueryString("orderid") }, function (result) {20 //alert(result);21 document.getElementById("li1").innerHTML = "订单号：" + result.list[0].OrderId;22 document.getElementById("li3").innerHTML = "订单状态：" + result.list[0].OrderStatus;23 document.getElementById("li5").innerHTML = "下单时间：" + result.list[0].OrderDate;24 document.getElementById("li7").innerHTML = "订单总金额：" + result.list[0].OrderTotal;25 document.getElementById("lititle").innerHTML = result.list[0].ModeName;26 document.getElementById("liimg").src = result.list[0].Image;27 //下面信息28 document.getElementById("li21").innerHTML = "活动：" + result.list[0].ActivityName;29 document.getElementById("li22").innerHTML = "收件人：" + result.list[0].ShipTo;30 document.getElementById("li23").innerHTML = "地址：" + result.list[0].Address;31 document.getElementById("li24").innerHTML = "发货公司：" + result.list[0].CompanyName;32 document.getElementById("li25").innerHTML = "个性化：" + result.list[0].Remark;33 })34 });35 36 function getQueryString(name) {37 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");38 var r = window.location.search.substr(1).match(reg);39 if (r != null) return unescape(r[2]); return null;40 }41 </script>
这里返回的数据就是一个json数组，然后用点号选择前面写的key 也就是键值就OK
C# 对JS解析AJX请求JSON并绑定到html页面的一些心得
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。