AJAX如何解析后台传来的json数据？

Posted 2023-03-27

新手自学，利用webmethod方法得到查询结果集，并返回到前台通过ajax解析json数据，在指定的表格里循环显示结果。我查了许多资料，也改了很多次，但始终没有结果。程序也不报错，请知道的朋友能提供帮助。

item[i].xm
改为
item.xm
其他类似情况也照此修改
item本身就是遍历出的每个元素（而不是整个json对象），不要加下标
另外，你这data.d的值是字符串还是json对象？如果是前者，那就要用eval转换为json对象，是后者就不需要再转换。追问

我在WebMethod里转换成json格式后return给前台。无论我是否eval，点按钮后，依旧没有反应

追答

那你在控制台输出data的内容，看看是什么格式

追问

我现在数据有显示了，果然是要去掉下标，谢谢你，分给你了。

参考技术A 根据你的代码看在后台数据是被转成json传给前台的,那么在前台js中直接用data.d就可以获取到值,不用用eval
望采纳追问

我在WebMethod里转换成json格式后return给前台。无论我是否eval，点按钮后，依旧没有反应

参考技术B 1.直接定义返回数据类型为json,
$.ajax(     url:"",     dataType:"json" );
然后请求成功后返回的数据就是json数据，
2.直接使用JSON.parse ()

看板ajax动态获取后台传来json数据，加载到页面表格中

ajax动态获取后台传来json数据，加载到页面表格中

• 摘要
• • 1.WebApi
  • 2.看板HTML
  • 3.ajax获取后台传来的数据：在这里要注意声明提升，所以需要在for循环外var str1 = “”; 要不然页面中的第一个数据就会打印undefined。
  • 效果展示

摘要

近期需要在汽车产品车间开发几个看板，其中一个看板需要动态加载表格。通过ajax动态获取webapi传过来的json数据，加载表格。

1.WebApi

    [Route("api/[controller]/[action]")]
    [ApiController]
    public class KanbanController : ControllerBase
    
        readonly EFCoreMISDbContext misContext = new();
        /// <summary>
        /// 获取汽车生产产品资料
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public async Task<IEnumerable<KanbanCarProduct>> GetKanbanCarProductsAsync() 
        

            return  misContext.KanbanCarProducts.Where(k=> EF.Functions.DateDiffDay(k.CreatedTime, DateTime.Now)==2).DefaultIfEmpty();
        
        /// <summary>
        /// 获取汽车产品每日资料
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public async Task<IEnumerable<KanbanCarDaily>> GetKanbanCarDailiesAsync()
        
            var kanbanCarDailies = from u in misContext.KanbanCarDailies
                                    select u;
            return kanbanCarDailies.DefaultIfEmpty();
        
    

2.看板HTML

<div class="content">
                <img class="guang" src="~/SmartBigScreen/banktpl/img/title.png" />
                <div class="tb tb_left">
                    <h3>生产管理看板(汽车产品)</h3>
                    <table class="table1">
                        <tr class="tb_title"><td>型号</td><td>工单</td><td>工单数</td><td>预计入库日</td><td>实际完成日</td><td>预计完成数</td><td>实际完成数</td><td>备注</td></tr>
                        <tbody id="t1">
                        </tbody>
                    </table>
                </div>
                <div style="clear:both"></div>
                <div class="tb tb_left">
                    <h3>汽车产品每日追踪</h3>
                    <table class="table1">
                        <tr class="tb_title"><td>型号</td><td>工单</td><td>生产时间段</td><td>不良项</td><td>生产数</td><td>不良率</td><td>原因分析</td><td>对策</td><td>责任人</td><td>完成时间</td></tr>
                       <tbody id="t2">
                        </tbody>
                    </table>
                </div>
            </div>

3.ajax获取后台传来的数据：在这里要注意声明提升，所以需要在for循环外var str1 = “”; 要不然页面中的第一个数据就会打印undefined。

原本可以直接构造一个table（见注释部分），因为样式暂时无法调整，改成标题采用HTML构造。数据部分由ajax请求后动态构造。

<script>
    $(function() 
        $.ajax(
            type: "get",
            url: baseUrl + "/api/Kanban/GetKanbanCarProducts",    //后台数据请求地址,
            dataType: "json",
            success: function(res) 
                var list = res;
                // var table = $("<table class='table1' ><tr class='tb_title'><td>型号</td><td>工单</td><td>工单数</td><td>预计入库日</td><td>实际完成日</td><td>预计完成数</td><td>实际完成数</td><td>备注</td></tr>");
                //table.appendTo($("#createtable"));
                //for (var i = 0; i < list.length; i++) 
                //    var tr = $("<tr></tr>");
                //    tr.appendTo(table);
                //    var td = $("<td>" + list[i].model + "</td><td>" + list[i].workOrder + "</td><td>" + list[i].estimatedQty + "</td><td>"+ list[i].expectedCompletionDate + "</td><td>"
                //    + list[i].actualCompletionDate + "</td><td>"+ list[i].expectedCompletionQty+"</td><td>"+ list[i].actualCompletionQty+"</td><td>"+ list[i].actualCompletionQty+"</td><td>"+ list[i].remark+"</td>");
                //    td.appendTo(tr);
                //
                //console.log(table);
                var str1 = "";
                for (var i = 0; i < list.length; i++)    //遍历
                    str1 += "<tr cate-id='0' fid='0'>" +
                        "<td>" + list[i].model + "</td>" +    //i代表下标，获取数据中的下标为i的1的值
                        "<td>" + list[i].workType+'-'+list[i].workOrder + "</td>" +
                        "<td>" + list[i].estimatedQty + "</td>" +
                        "<td>" + new Date(list[i].expectedCompletionDate).Format("yyyy-MM-dd") + "</td>" +
                        "<td>" +new Date( list[i].actualCompletionDate).Format("yyyy-MM-dd")  + "</td>" +
                        "<td>" + list[i].expectedCompletionQty + "</td>" +
                        "<td>" + list[i].actualCompletionQty + "</td>" +
                        "<td>" + list[i].remark + "</td>";    //i代表下标，获取数据中的下标为i的n的值，1-n是属性名
                
                t1.innerHTML = str1;   //将数据写入html中

            
        );
        //$("#createtable").append("</table>");

        $.ajax(
            type: "get",
            url: baseUrl + "/api/Kanban/GetKanbanCarDailies",    //后台数据请求地址,
            dataType: "json",
            success: function(res) 
                var list = res;
                var str1 = "";
                for (var i = 0; i < list.length; i++)    //遍历
                    str1 += "<tr >" +
                        "<td>" + list[i].model + "</td>" +    //i代表下标，获取数据中的下标为i的1的值
                        "<td>" + list[i].workType+'-'+list[i].workOrder + "</td>" +
                        "<td>" + list[i].startTime + '-' + list[i].endTime + "</td>" +
                        "<td>" + list[i].badItem + "</td>" +
                        "<td>" + list[i].estimatedQty + "</td>" +
                        "<td>" + list[i].badRate*100+'%' + "</td>" +
                        "<td>" + list[i].causeAnalysis + "</td>" +
                        "<td>" + list[i].countermeasure + "</td>" +
                        "<td>" + list[i].personLiable + "</td>" +
                        "<td>" + list[i].toc + "</td>";
                
                t2.innerHTML = str1;   //将数据写入html中

            
        );
    );
</script>

效果展示

尚待解决问题：UI颜搭配，UI的自适应问题。
后续解决！