Question

我已经从JsonResponse（Django）中搜索并实现了许多不同的方式来使用AJAX显示html表-但无济于事。

目前，我得到的最充分的信息是对网络控制台的响应：

{"products": "[{\"model\": \"products.product\", \"pk\": 2, \"fields\": {\"name\": \"Bag\", \"description\": \"Carries items conspicuously \", \"price\": \"10.99\"}}, {\"model\": \"products.product\", \"pk\": 3, \"fields\": {\"name\": \"iPhone 8 Plus\", \"description\": \"a mobile device from Apple\", \"price\": \"850.00\"}}, {\"model\": \"products.product\", \"pk\": 8, \"fields\": {\"name\": \"Shoes\", \"description\": \"For your feet\", \"price\": \"49.50\"}}, {\"model\": \"products.product\", \"pk\": 9, \"fields\": {\"name\": \"Gloves\", \"description\": \"For your hands\", \"price\": \"2.99\"}}, {\"model\": \"products.product\", \"pk\": 10, \"fields\": {\"name\": \"Blanket\", \"description\": \"Keep warm\", \"price\": \"13.79\"}}, {\"model\": \"products.product\", \"pk\": 11, \"fields\": {\"name\": \"Gown\", \"description\": \"Sleep time\", \"price\": \"25.99\"}}]"}

但是我希望这个字典通过ajax显示在我的html表上

我的Django模型如下：

class Product(models.Model):
    def __str__(self):
        return self.name
    name = models.CharField(max_length = 200)
    description = models.TextField()
    price = models.DecimalField(decimal_places=2,max_digits=100000)

我的django视图：

def product_list(request):

    productData = serializers.serialize("json", Product.objects.all())
    return JsonResponse({"products": productData})

我的html页面正文：

<body style='text-align:center'>
<table class="table table-striped" id="product-table">
    <thead class="thead-dark"><th>Item<th>Description<th>Price</th><th></th></thead>


    <tr>
        <form id="add-product">{% csrf_token %}
            <td><a><input type="text" class="form-control form-control-sm" id="newProductName" placeholder="Product name"></a></td>
            <td><a><input type="text" class="form-control form-control-sm" id="newProductDesc" placeholder="Product description"></a></td>
            <td><a><input type="text" class="form-control form-control-sm" id="newProductPrice" placeholder="£--.--"></a></td>
            <td><button type="submit" class="btn btn-primary btn-sm" id="newProductSubmit">add</button></td>
        </form>
    </tr>

</table>



<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="{% static 'main.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

和我的ajax函数获取jsonresponse：

$(document).ready(function() {
    $.ajax({
        url: 'products/getProducts/',
        datatype: 'json',
        type: 'GET',
        success: function (data) {
            alert("Got data!")
            jData = JSON.parse(data)
            alert("got json products!");
        }
    });
});

使用ajax，我知道我缺少将数据转换为html并追加到表中的内容，但是当我尝试这样做时，它根本没有添加任何内容

Answer 1

我仅向您提供一个示例，说明如何使用上面提供的javascript JSON字符串数据以HTML格式创建表：

<div>
    <table cellpadding="2" cellspacing="2" border="0" bgcolor="#dfdfdf" width="40%" align="center">
<thead>
    <tr>
        <th width="30%">Name</th>
        <th width="50%">Description</th>
        <th width="12%">price</th>
    </tr>
</thead>
    <tbody id="tableData"></tbody>
</table>
</div>

<style>      
table, td {
    border: 1px solid black;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script language="javascript" type="text/javascript">

var newProducts = {"products": "[{\"model\": \"products.product\", \"pk\": 2, \"fields\": {\"name\": \"Bag\", \"description\": \"Carries items conspicuously \", \"price\": \"10.99\"}}, {\"model\": \"products.product\", \"pk\": 3, \"fields\": {\"name\": \"iPhone 8 Plus\", \"description\": \"a mobile device from Apple\", \"price\": \"850.00\"}}, {\"model\": \"products.product\", \"pk\": 8, \"fields\": {\"name\": \"Shoes\", \"description\": \"For your feet\", \"price\": \"49.50\"}}, {\"model\": \"products.product\", \"pk\": 9, \"fields\": {\"name\": \"Gloves\", \"description\": \"For your hands\", \"price\": \"2.99\"}}, {\"model\": \"products.product\", \"pk\": 10, \"fields\": {\"name\": \"Blanket\", \"description\": \"Keep warm\", \"price\": \"13.79\"}}, {\"model\": \"products.product\", \"pk\": 11, \"fields\": {\"name\": \"Gown\", \"description\": \"Sleep time\", \"price\": \"25.99\"}}]"};    

var mainObj = JSON.parse(newProducts.products); // I created an object from the json response

// you can iterate over the javascript Object

var k = '<tbody>'

    for(i = 0;i < mainObj.length; i++){             
        k+= '<tr>';
        k+= '<td>' + mainObj[i]["fields"]["name"] + '</td>';
        k+= '<td>' + mainObj[i]["fields"]["description"] + '</td>';
        k+= '<td>' + mainObj[i]["fields"]["price"] + '</td>';
        k+= '</tr>';
    }
    k+='</tbody>';
    document.getElementById('tableData').innerHTML = k;

</script>

这是上面代码的简单表结果：

我希望这可以告诉您一些方向。您当然可以设置表的样式（或以其他方式创建表），并且可以访问研究和使用此示例的所有其他数据。

因此，您应该通过在成功：处调用添加的javascript函数来扩展Ajax，该函数已放入我的jQuery / javasript中。

$(document).ready(function() {
    $.ajax({
        url: 'products/getProducts/',
        datatype: 'json',
        type: 'GET',
        success: function (data) {
            alert("Got data!")
            jData = JSON.parse(data)
            alert("got json products!");
            tableFromResponse(jData);
        }
    });
});

function tableFromResponse(responseData) {

        var mainObj = JSON.parse(responseData.products);

        var k = '<tbody>'

        for(i = 0;i < mainObj.length; i++){

            k+= '<tr>';
            k+= '<td>' + mainObj[i]["fields"]["name"] + '</td>';
            k+= '<td>' + mainObj[i]["fields"]["description"] + '</td>';
            k+= '<td>' + mainObj[i]["fields"]["price"] + '</td>';
            k+= '</tr>';
        }
        k+='</tbody>';
        document.getElementById('tableData').innerHTML = k;
}

（当然，如果造成麻烦，可以从代码中省去很多json.parse步骤。因为在这种情况下，我编写的代码没有Django的真实响应数据）。

从Django模型获取数据并使用AJAX在html表中显示

1 个答案: