C# 对JS解析AJX请求JSON并绑定到html页面的一些心得

2020-12-13 14:46

阅读:342

标签:des   返回顶部   style   blog   http   io   color   os   ar   

在今天在项目的时候,碰到一个小问题  在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>信息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>

简单贴两句代码

下面就是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页面的一些心得

标签:des   返回顶部   style   blog   http   io   color   os   ar   

原文地址:http://www.cnblogs.com/suchi/p/4065985.html


评论


亲,登录后才可以留言!