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 IsReusable 63 { 64 get 65 { 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
