javascript - 当数据库更改时使用 Ajax、jquery 更新 html 列和表。 Django

Question

我是使用 Ajax 和 javascript 的新手。我有一个 HTML 页面，它将显示客户的购物状态。就像下图一样。 我想用Ajax和jquery来实现这样的东西，比如当客户拿到更多产品或把产品放回去时，数据库就会更新，并且网页将立即显示，而无需使用ajax刷新网页。此外，它还会计算总价。当新客户进来或结账时，新列将被添加或删除。

我有谷歌如何使用长轮询:

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);
    }
}

test.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)

我不知道如何在不使用 php 的情况下组合它。问题是我不知道如何在 Ajax 部分获取对象。

请给我一些关于如何做的建议。谢谢!!

Answer 1

您的 View 返回使用对象值呈现的 html。您现在想要的是在浏览器端进行一些渲染。第一步，您应该创建一个返回相同数据但为 JSON 的 View 。

为此，您通常返回 HttpResponse(data, "application/json")与 data是您的 JSON(例如使用 json.dumps 转储为 JSON 的字典)

然后，您的 JavaScript 函数将能够解析此 JSON 并构建您的表。例如，您可以重复使用 ajax 调用，但通常使用 GET 请求，而不是 POST :

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

然后在此函数中，结果中包含 Django View 生成的 JSON，以便您可以循环数据并为每个对象添加一行。

由于渲染现在将由 JavaScript 处理，因此您的 Django 模板的 tbody 现在将为空。