附加到表时，Django JSON AJAX 数据顺序不正确

Question

我想要的是，在前端，当按下按钮时，使用 Ajax 从后端检索数据，然后将它们附加到表中。我正在使用 Django 1.9。

我设法做到了。但是，每个值并不匹配每一列，如图所示：

所以这是我的问题。 CDK 应该是名称，而不是价格。

在views.py中，我有：

def ajax_dict(reuqest):
dicWCWishlist = [{"CDK":"Fallout 4","Price":"￥199", "Addin-Date":"Gifted! Thank you!"}, {"CDK":"Far Cry Primal","Price":"€59.99", "Addin-Date":"2015-12-5"}, {"CDK":"iPhone 6S plus","Price":"$749", "Addin-Date":"2016-1-15"}, {"CDK":"wrong", "Price":"$$999", "Addin-Date":"1980-3-9"}]
return JsonResponse(dicWCWishlist, safe = False)

在 runAjax.html 中，我有：

        $("#btnJJDBZ").click(function() {
            // alert("Boom!");
            $.get("../ajax_dict/", function(res) {
                for(var i = 0; i < res.length; i++) {
                    var ntr = $("<tr></tr>");                       
                    $.each(res[i], function(key, value) {
                        var ntd = $("<td></td>")                        
                        ntd.html(value);    
                        ntr.append(ntd);            
                    })      
                    $("#tbodyWishlist").append(ntr);
                }
            });
        });

另外，更奇怪的是，每当我修改views.py文件时，接收到的数据顺序又会随机改变。就像我在行尾添加一个空格，或者我将价格从 749 美元更改为 750 美元，保存并刷新页面，然后价格列数据移动到加载日期，或者随机在我不知道的某个列下。

----------------------------------------------- --------------------------

---

感谢@luke_aus 的帮助，问题暂时解决了。

在runAjax.html中，修改jquery代码如下：

        $("#btnJJDBZ").click(function(){
            $.get("../ajax_dict", function(res) {
                $.each(res, function(){
                    $.each(this, function(key, value){
                        var ntr = $("<tr></tr>");
                        var ntd1 = $("<td class='CDK'></td>");
                        var ntd2 = $("<td class='Price'></td>");
                        var ntd3 = $("<td class='Addin-date'></td>");
                        $.each(this, function(key, value){
                            switch(key){
                                case "CDK":
                                    ntd1.html(value);
                                    break;
                                case "Price":
                                    ntd2.html(value);
                                    break;
                                case "Addin-Date":
                                    ntd3.html(value);
                                    break;
                            }
                        })
                        ntr.append(ntd1).append(ntd2).append(ntd3);
                        $("#tbodyWishlist").append(ntr);
                    });
                });
            });

我也改变了数据格式。

dicWCWishlist = {"list":[{"CDK":"Fallout 4","Price":"￥199", "Addin-Date":"Gifted! Thank you!"}, {"CDK":"Far Cry Primal","Price":"€59.99", "Addin-Date":"2015-12-5"}, {"CDK":"iPhone 6S plus","Price":"$749", "Addin-Date":"2016-1-15"}, {"CDK":"wrong1", "Price":"$$999", "Addin-Date":"1980-3-9"}]}

我所做的基本上是，

1. 提前创建tr和3个tds
2. 当钥匙来时，手动告诉它是什么钥匙（使用开关）
3. 用正确的值更改对应的单元格（使用 html()）

但是，问题还在！

为什么我的数据顺序是随机的？

JsonResponse 对我的 JSON 做了什么？

Answer 1

一种方法是使用 td 创建每一行，其类名对应于每个对象的 JSON 对象键，然后将每个对象的数据添加到相应的 td。

例如为每个 ajax 对象生成表（而不是按照这个例子每次点击） https://jsbin.com/sihudumere/edit?html,css,output

然后将数据放在正确的列中：

jsonObj[key] = value newRow.children('.key).text(value)

Answer 2

你可以替换这个

ntd.html(value);

有了这个

ntd.text(value)

试试吧，我的兄弟。