Question

我有一些Django Web应用程序返回的JSON数据，这些数据要显示在HTML列表中。由于某种原因，它对我不起作用。 JSON由Ajax Get请求生成，该请求显示数据库中的所有产品。 get请求按预期的方式工作，但是当我尝试在Html页面上显示产品的详细信息时，什么也没有显示。这是我到目前为止的相关代码：
这是Views.py文件：

from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
from products.models import Product
from django.http import HttpResponse, JsonResponse

def index(request):
    return render(request, 'index.html')


def viewProduct(request):
    if request.method == 'GET':
        product_list = Product.objects.all()
        products=[]
        for prod in product_list:
            products.append({"name": prod.name, "description": prod.description, "price": prod.price})
    return JsonResponse(products, safe=False)

Index.html页面：

<!DOCTYPE html>
<html>
<body>
  <div>
  <h2 id="title">Create product</h2>
  <input id="name">Name</input>
  <br>
  <input id="description">Description</input>
  <br>
  <input id="price">Price</input>
  <br>
  <button id="add-product">ADD PRODUCT</button>
  </div>

  <table id = "employee-table">
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>    
  </table>
</body>

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

<script type="text/javascript">

  document.getElementById('add-product').onclick =  function(){
    sendData();
    getData();
  }

function getData(){
  $.ajax({
    url: 'view/product',
    dataType: 'json',
    type: 'GET',
    success: function(data){
      console.log("success")
      var dmJSON = "http://localhost:8000/view/product";
      $.getJSON(dmJSON, function(data) {
        $.each(data.entries, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.name + "</td>" + "<td>" + f.description + "</td>" + "<td>" + f.price + "</td>" + "</tr>"
          $(tblRow).appendTo("#employee-table");
      });
    })
  }})
}

</script>
</html>

当我进入URl“ http://localhost:8000/view/product”时，Json出现了，其格式为：

[{
        "name": "iPhone",
        "description": "Apple iPhone",
        "price": "200"
    }, {
        "name": "Samsung Galaxy",
        "description": "Samsung Phone",
        "price": "150"
    }

我想要做的是遍历所有这些产品并将它们显示在表格中。但是，这没有用，所以我不确定从这里开始该怎么做。我已经检查了index.html页面中的getData（）方法，它确实在成功函数中输出了console.log消息。唯一不起作用的部分是表中项目的显示。提前感谢您的帮助。

在HTML表中显示Json表

0 个答案: