Question

接着我的最后一个问题，我有一个django Web应用程序，我正在尝试使用JsonResponse方法将其与数据库中的数据一起显示在HTML页面上。该网站允许用户输入新产品的详细信息。我正在尝试对其进行设计，以便当他们输入详细信息时，其下的Div将自动更新并显示已输入的新项目以及数据库中的现有项目。这是我的代码：

索引页：

<!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>

  <div id="productList">
  </div>
</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 sendData(){
  var order = {
  name: document.getElementById('name').value,
  description: document.getElementById('description').value,
  price: document.getElementById('price').value
 };

 $.ajax({
  type: "POST",
  url: 'create/product',
  data: order,
  success: function(newProduct){
    console.log("success"),
    $('#name').val(""),
    $('#description').val(""),
    $('#price').val("")
  }
 });
};

function getData(){
  $.ajax({
    url: 'view/product',
    dataType: 'json',
    type: 'GET',
    success: function(data){
      $.each(data.prod, function(index, element){
        $('body').append($('#productList', {
          text: element.name
        }));
      });
    }
  });
}
</script>
</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')

@csrf_exempt
def createProduct(request):
    if request.method == 'POST':
        name = request.POST.get('name')
        description = request.POST.get('description')
        price = request.POST.get('price')

        newProduct = Product(
            name = name,
            description = description,
            price = price
        )

        newProduct.save()

        return HttpResponse('')


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)

现在，我认为getData（）方法可以正常工作，就像我在函数的成功部分中包含console.log消息时一样，它可以工作并打印到控制台。但是，它没有按照我的意愿将产品的详细信息添加到Div中。预先感谢您对此的任何答复。

Answer 1

在这里找到解决方案

function getData(){
  $.ajax({
    url: 'view/product',
    dataType: 'json',
    type: 'GET',
    success: function(data){
      $('#productList').empty();
      $.each(data.prod, function(index, element){
        $('#productList').append(element.name);
      });
    }
  });
}

收到数据后，首先需要清空productList容器，然后将element.name附加到productList。

无法使用JSON数据更新Div

1 个答案: