C# 对JS解析AJX请求JSON并绑定到html页面的一些心得
2020-12-13 14:46
标签:des 返回顶部 style blog http io color os ar 在今天在项目的时候,碰到一个小问题 在ashx文件中请求返回的json字符怎样绑定到页面 直接上代码 这是在ashx部分 以上是从数据库中读取数据后放入json字符串中 注意这行代码 1 //context.Response.ContentType = "text/plain"; 2 context.Response.ContentType = "application/json"; 上面那个是文件自动添加的 下面是改的 如果不修改这行代码,返回的内容就会成为字符串 前台页面代码 简单贴两句代码 下面就是JS请求部分和处理传回来的JSON 这里返回的数据就是一个json数组,然后用点号选择前面写的key 也就是键值就OK C# 对JS解析AJX请求JSON并绑定到html页面的一些心得 标签:des 返回顶部 style blog http io color os ar 原文地址:http://www.cnblogs.com/suchi/p/4065985.html 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 }
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>信息1li>
li id="li22">i>i>信息2li>
li id="li23">i>i>信息3li>
li id="li24">i>i>信息4li>
li id="li25">i>i>信息5li>
ul>
body>
html>
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>
文章标题:C# 对JS解析AJX请求JSON并绑定到html页面的一些心得
文章链接:http://soscw.com/essay/34456.html