Javascript 返回JSON响应并通过jQuery重建HTML表

我有一个.NET控制器操作，它基本上在对服务器进行POST调用后返回JSON响应，如下所示：

 responseDetails.Add(new ActiveSubsPayPal
                        {
                            ProfileID = item.ProfileId,
                            Status = profileType,
                            LastTimePaid = DateTime.Now,
                            NextTimePayment = DateTime.Now,
                            BillingCycle = subType,
                            TotalCyclesCompleted = 2,
                            TotalAmountPaid = 40.0d
                        });

return  new JavaScriptSerializer().Serialize(responseDetails);


[{"ProfileID":"123","Status":"Not active profile","LastTimePaid":"2016-12-18T21:46:27Z","NextTimePayment":null,"BillingCycle":"Each year","TotalCyclesCompleted":"1","TotalAmountPaid":"180.00"}]

如您所见，响应详细信息是一个包含这些属性的列表。列表中可以有0、1或50条记录。。。接下来我要做的是将其转换为JSON，如下所示：

 responseDetails.Add(new ActiveSubsPayPal
                        {
                            ProfileID = item.ProfileId,
                            Status = profileType,
                            LastTimePaid = DateTime.Now,
                            NextTimePayment = DateTime.Now,
                            BillingCycle = subType,
                            TotalCyclesCompleted = 2,
                            TotalAmountPaid = 40.0d
                        });

return  new JavaScriptSerializer().Serialize(responseDetails);


[{"ProfileID":"123","Status":"Not active profile","LastTimePaid":"2016-12-18T21:46:27Z","NextTimePayment":null,"BillingCycle":"Each year","TotalCyclesCompleted":"1","TotalAmountPaid":"180.00"}]

下面是HTML/jQuery部分：

 $(".scanSubs").click(function () {
        $.post("/Administrator/GetUserSubs", { uid: $(this).closest('tr').find('.idrowSubs').attr("value") })
        .done(function (response) {

           // reconstruct the HTML table here and inject recontructed HTML => JSON into the DOM

        });
    });

 <table class="table table-striped" id="tableSubs">
               <thead>
                   <tr>
                   <th>PROFILE ID</th>

                   <th>Status</th>
                   <th>Last Time Paid</th>
                   <th>Next Payment</th>
                   <th>Billing Cycles</th>
                    <th>Total Billing Cycles</th>
                       <th>Total Amount Paid</th>
                   </tr>

               </thead>
                <tbody>

                   <tr>
                       <td><b>123</b></td>


                       <td>Active</td>


                       <td>12.12.2012</td>


                       <td>12.12.2012</td>


                       <td>4 Weeks</td>


                       <td>12</td>


                       <td>$122.23</td>
                   </tr>

                </tbody>
            </table>

$（“.scanSubs”）。单击（函数（）{
$.post（“/Administrator/GetUserSubs”，{uid:$（this）.closest（'tr'）.find（'idrowSubs'）.attr（“value”）}）
.完成（功能（响应）{
//在这里重新构造HTML表，并将重新构造的HTML=>JSON注入DOM
});
});
配置文件ID
地位
上次付款
下次付款
计费周期
总计费周期
支付总额
123
活跃的
12.12.2012
12.12.2012
4周
12
$122.23

---

现在，我如何将JSON重新构建为HTML，并在浏览器中执行注入，以便查看结果？有人能帮我吗？

请使用$遍历JSON中的每条记录。每条（响应、函数（idx、obj）{}并创建如下html

 var tableHtml = "<table class="table table-striped" id="tableSubs"><thead><tr><th>PROFILE ID</th><th>Status</th><th>Last Time Paid</th><th>Next Payment</th><th>Billing Cycles</th><th>Total Billing Cycles</th><th>Total Amount Paid</th></tr></thead><tbody>";
                        $.each(data, function (idx, obj) {
                            tableHtml += "<tr>";
                            tableHtml += "<td>" + obj.ProfileID + "</td>";
                            tableHtml += "<td>" + obj.Status + "</td>";
                            tableHtml += "<td>" + obj.LastTimePaid + "</td>";
                            tableHtml += "<td>" + obj.NextTimePayment + "</td>";
                            tableHtml += "<td>" + obj.BillingCycle + "</td>";
                            tableHtml += "<td>" + obj.TotalCyclesCompleted + "</td>";
                            tableHtml += "<td>" + obj.TotalAmountPaid + "</td>";
                            tableHtml += "</tr>";
                        });
                        tableHtml += "</tbody></table>";
                        $("#TABLEID").html(tableHtml);

var tableHtml=“PROFILE idStatus上次付款下一次付款开票周期总计开票周期总计已付款金额”；
$.each（数据、函数（idx、obj）{
tableHtml+=“”；
tableHtml+=“”+obj.ProfileID+“”；
tableHtml+=“”+obj.Status+“”；
tableHtml+=“”+obj.LastTimePaid+“”；
tableHtml+=“”+obj.NextTimePayment+“”；
tableHtml+=“”+obj.BillingCycle+“”；
tableHtml+=“”+obj.TotalCyclesCompleted+“”；
tableHtml+=“”+obj.TotalAmountPaid+“”；
tableHtml+=“”；
});
tableHtml+=“”；
$（“#TABLEID”）.html（tableHtml）；

请参见示例数据

 var tableHtml = "<table class='table table-striped' ><thead><tr><th>PROFILE ID</th><th>Status</th><th>Last Time Paid</th><th>Next Payment</th><th>Billing Cycles</th><th>Total Billing Cycles</th><th>Total Amount Paid</th></tr></thead><tbody>";
            $.each([{"ProfileID":"123","Status":"Not active profile","LastTimePaid":"2016-12-18T21:46:27Z","NextTimePayment":null,"BillingCycle":"Each year","TotalCyclesCompleted":"1","TotalAmountPaid":"180.00"}], function (idx, obj) {
                tableHtml += "<tr>";
                tableHtml += "<td>" + obj.ProfileID + "</td>";
                tableHtml += "<td>" + obj.Status + "</td>";
                tableHtml += "<td>" + obj.LastTimePaid + "</td>";
                tableHtml += "<td>" + obj.NextTimePayment + "</td>";
                tableHtml += "<td>" + obj.BillingCycle + "</td>";
                tableHtml += "<td>" + obj.TotalCyclesCompleted + "</td>";
                tableHtml += "<td>" + obj.TotalAmountPaid + "</td>";
                tableHtml += "</tr>";
            });
            tableHtml += "</tbody></table>";
            $("#TABLEID").html(tableHtml);

var tableHtml=“PROFILE idStatus上次付款下一次付款开票周期总计开票周期总计已付款金额”；
$.each（[{“ProfileID”：“123”，“Status”：“Not active profile”，“lasttimepayed”：“2016-12-18T21:46:27Z”，“NextTimePayment”：null，“BillingCycle”：“每年”，“TotalCyclesCompleted”：“1”，“totalAmountPayment”：“180.00”}），函数（idx，obj）{
tableHtml+=“”；
tableHtml+=“”+obj.ProfileID+“”；
tableHtml+=“”+obj.Status+“”；
tableHtml+=“”+obj.LastTimePaid+“”；
tableHtml+=“”+obj.NextTimePayment+“”；
tableHtml+=“”+obj.BillingCycle+“”；
tableHtml+=“”+obj.TotalCyclesCompleted+“”；
tableHtml+=“”+obj.TotalAmountPaid+“”；
tableHtml+=“”；
});
tableHtml+=“”；
$（“#TABLEID”）.html（tableHtml）；

要实现这一点，只需循环通过AJAX请求返回的

响应

数组，以及一些简单的日期格式。尝试以下方法：

var响应=[{
“ProfileID”：“123”，
“状态”：“非活动配置文件”，
“LastTimePaid”：“2016-12-18T21:46:27Z”，
“NextTimePayment”：空，
“计费周期”：“每年”，
“TotalCyclesCompleted”：“1”，
“已支付总额”：“180.00”
},{
“ProfileID”：“456”，
“状态”：“非活动配置文件”，
“LastTimePaid”：“2017-12-18T21:46:27Z”，
“NextTimePayment”：空，
“计费周期”：“每年”，
“TotalCyclesCompleted”：“2”，
“支付总额”：“290.00”
}]
函数formatDate（日期字符串）{
如果（！dateString）
返回“”；
var d=新日期（日期字符串）；
return（'00'+d.getDate（））.slice（-2）+'.+.（'00'+（d.getMonth（）+1））.slice（-2）+'.+d.getFullYear（）
}
//在done（）处理程序中。。。
var html=''；
response.forEach（函数（obj）{
html+=''；
html+=''+obj.ProfileID+''；
html+=''+对象状态+''；
html+=''+格式日期（obj.LastTimePaid）+''；
html+=''+格式日期（obj.NextTimePayment）+''；
html+=''+obj.BillingCycle+''；
html+=''+obj.TotalCyclesCompleted+''；
html+='$'+obj.TotalAmountPaid+''；
html+=''；
});
$（'#tableSubs'）。追加（html）；

配置文件ID
地位
上次付款
下次付款
计费周期
总计费周期
支付总额
123
活跃的
12.12.2012
12.12.2012
4周
12
$122.23

您可以使用占位符替换html，查看仅html的行需要多个占位符，因此创建行的模板

var template = "
    <tr>
       <td><b>{{ProfileID}}</b></td>
       <td>{{Status}}</td>
       <td>{{NextTimePayment}}</td>
       <td>{{LastTimePaid}}</td>
       <td>{{BillingCycle}}</td>
       <td>{{TotalCyclesCompleted}}</td>
       <td>{{TotalAmountPaid}}</td>
    </tr>"

---

各位，JSON数组中的每个记录都应该与表本身中的一个表行相匹配，这让我非常困惑……返回表体的部分视图会更容易，但是如果您想返回JSON，

响应

是一个数组，所以您只需循环数组中的每个项并访问其属性即可生成你的html。@StephenMuecke你能告诉我怎么做吗？顺便说一句。如果我返回了一个局部视图，如果它最初不是在页面加载时设置的，我将如何填充表的数据源？=D你现在有几个答案（尽管不是很好）。在视图中创建一个模板（隐藏）并克隆它并设置值/文本或elements@StephenMuecke好的，我想我明白了。顺便说一句，我能这样做吗……我把桌子摆好了