Проблема обновления Div с данными JSON - PullRequest
Новая
       15

Проблема обновления Div с данными JSON

0 голосов
/ 14 ноября 2018

Следуя моему последнему вопросу, у меня есть веб-приложение django, которое я пытаюсь использовать для отображения данных на странице HTML с данными из базы данных, используя метод JsonResponse.Веб-сайт позволяет пользователям вводить детали нового продукта.Я пытаюсь спроектировать его так, чтобы при вводе деталей элемент 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, как я хотел бы.Заранее благодарим за любые ответы на этот вопрос.

1 Ответ

0 голосов
/ 14 ноября 2018

Здесь вы идете с решением 

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.

...