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">&nbsp;</li></ul>&nbsp;<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

转载于:https://www.cnblogs.com/suchi/p/4065985.html

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

解决IE11使用xlsx.full.js解析excel为Json格式兼容问题
最近做了一个需求,就是excel附件上传,然后要将excel的文件内容解析为json格式的数据,然后再发送到后台进行处理. 解析excel内容选用的插件是xlsx.full.min.js,其中有Fil ...
js 解析GET 请求参数
function parseSearchArgs() {var url = location.search; //获取url中"?"符后的字串var rst = {};if (ur ...
ajax请求json和xml数据及对json和xml格式数据的解析
ajax请求json和xml数据及对json和xml格式数据的解析一.ajax请求json数据并解析 ajax的写法: json数据解析: 请求json经常出现的跨域报错: 二.ajax请求xml数 ...
jquery的ajax，请求JSON数据。
jquery的ajax,请求JSON数据. 第一个页面:1.htm <!DOCTYPE html> <html> <head> <title></ ...
如何使用Node.js解析JSON？
我应该如何使用Node.js解析JSON? 是否有一些模块可以安全地验证和解析JSON? #1楼我想提一下,全局JSON对象还有其他选择. JSON.parse和JSON.stringify都是同步 ...
JS解析json数据并将json字符串转化为数组的实现方法
json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法, ...
js解析json数据
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1. 一种为使用eval()函数. 2. 使用Function对象来进行返回解析一.使用eval()函数系统后台代码 /// & ...
零基础学小程序006（后台数据的获取与解析）----请求服务器json数据展现到小程序上
视频讲解地址:https://edu.csdn.net/course/play/9531/265552 小程序云开发讲解视频:https://edu.csdn.net/course/detail/96 ...
js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式表单POST方式服务器代理 Html5的X ...

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

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

最新文章

热门文章