Обновите html столбцы и таблицы при изменении базы данных, используя Ajax, jquery. Django

Question

Я новичок в использовании Ajax и javascript. У меня есть страница HTML, которая будет показывать статус покупок от клиентов. Как на картинке ниже. Я хотел бы использовать Ajax и jquery, чтобы реализовать что-то вроде того, когда клиент получает больше продуктов или возвращает товары, база данных будет обновлена, и веб-страница будет отображаться немедленно без обновления. sh веб-страницу с помощью ajax. Кроме того, он рассчитает общую стоимость. И когда новый клиент входит или выходит, новый столбец будет добавлен или удален.

У меня есть Google, как использовать длинный опрос:

test. js

    $(document).ready(function(){
    pollServer();
});

var url='127.0.0.1:8000/test/'
var isActive = true;
function pollServer()
{
    if (isActive)
    {
        window.setTimeout(function () {
            $.ajax({
                url: "http://127.0.0.1:8000/test/",
                type: "POST",
                success: function (result) {
//                    alert('TTTT');
                    pollServer();
                },
                error: function () {
//                     alert("FFFFFFF");
                    pollServer();
                }});
        }, 3000);
    }
}

тест. html

    <div class="container custom-container-width" style="text-align=center;" >
  <div class="row gap-buffer"  >
    {% for customer in Customer %}
    <div class="col-sm-3 p-3  gap-buffer colsize " style="background-color:white;box-shadow: 10px 10px 5px grey; "  >
        <div class="profilesize">
            <img src="{{ MEDIA_URL }}/{{customer.uuid}}/{{customer.uuid}}.jpeg" width=192 height=108 >
        </div>
        <br>
          <div>
            <div class="table-responsive" >
               <table >
                  <thead class="thead-dark " >
                    <tr >
                      <th>Product</th>
                      <th>Count</th>
                      <th>Price</th>
                      <th>Subtotal</th>
                    </tr>
                  </thead>
                   <tbody >
                    {% for cart in Cart %}
                     {% if customer.id == cart.customer_id %}
                         {% for good in Good %}
                           {% if cart.id == good.cart_id %}
                          <tr>
                            <td>{{good.name}}</td>
                            <td>{{good.count}}</td>
                            <td>{{good.price}}</td>
                            <td> XXX</td>
                          </tr>
                            {% endif %}
                          {% endfor %}
                    {% endif %}
                   {% endfor %}

                      </tbody>
                    </table>
                <br>
                <P><strong>Total:</strong></P>
            </div>
        </div>
    </div>
    {% endfor %}
  </div>
</div>

views.py

def test(request):
context_dict = {}

customers = Customer.objects.all()
carts = Cart.objects.all().select_related('customer').order_by('customer_id')
goods = Good.objects.select_related('cart__customer').order_by('cart_id')

context_dict['Cart'] = carts
context_dict['Good'] = goods
context_dict['Customer'] = customers

return render(request, 'test.html', context=context_dict)

I не знаю, как объединить это без использования php. Проблема в том, что я не знаю, как получить объекты в Ajax части.

, пожалуйста, дайте мне несколько советов о том, как это сделать. спасибо !!

Answer 1

Ваше представление возвращает html визуализированный со значениями вашего объекта. Теперь вам нужно немного рендеринга на стороне браузера. Первый шаг, вы должны создать представление, которое возвращает те же данные, но как JSON.

. Для этого обычно вы возвращаете HttpResponse(data, "application/json") с data, являющимся вашим JSON (например, словарь выдается как JSON с json.dumps)

Ваша функция javascript сможет проанализировать этот JSON и построить вашу таблицу. Например, вы можете повторно использовать ваш ajax вызов, но обычно с запросом GET, а не POST:

       ...
       $.ajax({
            url: "http://127.0.0.1:8000/your_json_view/",
            type: "POST",
            success: function (result) {
       ...

Затем в этой функции в результате вы получите JSON, созданный вашим Django просмотрите l oop поверх данных и добавьте строку для каждого объекта.

Поскольку рендеринг теперь будет обрабатываться с помощью javascript, ваше тело шаблона Django теперь будет пустым.

Answer 2

привет ، если вы не собираетесь обновлять sh страницу, у меня есть идея для вас. с помощью ajax вы можете обновить базу данных, просто ajax отправит данные на определенный URL-адрес, а в бэкэнде вы получите данные и сделаете это. но django заставит вас вернуть ответ. таким образом, ответ будет любым, но очень полезно, если ответом будет json. снова в той же функции ajax функция успеха уже существует, и эта функция будет перехватывать ответ, а затем обновлять содержимое страницы. но другой способ сделать это заключается в том, что вы не будете обновлять sh страницу. просто обработайте любое изменение на javascript только на стороне клиента, не ожидая ответа на стороне сервера. но все еще отправляю данные на серверную часть и выполняю обновление. просто нет необходимости в ответе из базы данных.

пример:

$.ajax({
    url: url,
    type: "POST",
    data: {
          'total_stuff': number
    },

   success: function(res) {
          document.getElementById('total_price').html = res['total_price'];
   }
});

предположим, что вы вернули ответ json, содержащий ключ общей цены.