Javascript 使用Ajax、jquery在数据库更改时更新html列和表。德扬戈

我对使用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>

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

---

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

嗨，如果你不想刷新页面，我有个主意给你。 通过使用ajax，您可以简单地更新数据库，ajax将数据发送到定义的url，在后端，您将获取数据并执行此操作。但是django会强迫你回复。所以你会发现，这个响应可以是任何东西，但如果是json响应，它会非常有用。同样，在同一个ajax函数中已经存在一个success函数，该函数将捕获响应，然后更新页面内容。但另一种方法是，不要刷新页面。只需在客户端通过javascript处理任何更改，而无需等待服务器端响应。但仍然将数据发送到服务器端并进行更新。只是不需要数据库的响应

例如：

---

假设返回的json响应包含总价键。

视图返回使用对象值呈现的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) {
       ...

然后在这个函数中，结果是由Django视图生成JSON，这样就可以循环数据并为每个对象添加一行

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

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

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

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