Question

刚接触AJAX时，我遇到了这个问题，没有运气可以解决。我希望在ajax发布以查看对象后刷新我的表，我尝试过的一切都是徒劳的。

假设ajax响应是JSON结果，以避免发布我的OnPost()代码。我使用Ajax发送产品的 Id ，然后使用该 Id 删除产品

然后，我调用OnGet()所用的相同方法来填充返回更新列表的表。在chrome调试工具中，我看到响应成功返回更新列表。我只是不知道如何使它回到我的清单。预先感谢大家。

    @Html.AntiForgeryToken()
<table id="shoppingBag" class="table">
    <thead>
        <tr>
            <th scope="col">Item</th>
            <th scope="col">Price</th>
            <th scope="col">Quantity</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.ShoppingBagItems)
        {
            <tr>
                <td>
                    @item.Product.Name
                </td>
                <td>
                    @item.Price.ToString("C")
                </td>
                <td>
                    <input value="@item.Quantity" size="1" maxlength="1" class="text-center" />
                </td>
                <td>
                        <button onclick="remove(@item.Product.Id.ToString())" class="close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                </td>
            </tr>
        }
    </tbody>
</table>

<script>
    function remove(id) {
        $.ajax({
            type: 'POST',
            url: 'ShoppingBag?handler=Delete',
            headers: {
                "XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: ''+id+'',
            sucess: function (response) {
                append_json(response);
            }
        });
    }

    function append_json(data){
        var table = document.getElementById('shoppingBag');
        data.forEach(function(object) {
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' +
                object.product.name +
                '</td>' +
                '<td>' +
                object.price +
                '</td>' +
                '<td>' +
                object.quantity +
                '</td>';
            table.appendChild(tr);
        });
    }
</script>

Answer 1

在此append_json(response);添加下面的代码以刷新表之后，以Ajax成功的方法

$("#shoppingBag").load(window.location + " #shoppingBag");

Answer 2

更改：

var table = document.getElementById('shoppingBag');

收件人：

var table = $('#shoppingBag tbody');

AND

更改：

table.appendChild(tr);

收件人：

table.append(tr);

Answer 3

您要将数据附加到主<table>上，如果您检查表，则可以看到附加的html。但是您需要将数据附加到表的正文中为此，您可以使用$("#shoppingBag tbody").append(tr);

或者您可以像<body>一样向<tbody id="myTestTableBody">添加 id 并将其用于JavaScript

function append_json(data){
        var table = document.getElementById('myTestTableBody');
        data.forEach(function(object) {
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' +
                object.product.name +
                '</td>' +
                '<td>' +
                object.price +
                '</td>' +
                '<td>' +
                object.quantity +
                '</td>';
            table.appendChild(tr);
        });
    }

我添加了一个示例代码，该代码将如何将数据追加到现有表中

var page=1;
function AddData() {

       $.ajax({
    url: "https://reqres.in/api/users?page="+page,
    type: "GET",
    
    success: function(response){
        append_json(response.data);
    }
});
page++;
}

    function append_json(data){
        data.forEach(function(object) {
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' +
                object.first_name +
                '</td>' +
                '<td>' +
                object.last_name +
                '</td>' +
                '<td>' +
                '<img src ='+object.avatar +' width="50px" height="50px" />'+
                '</td>';
            $("#shoppingBag tbody").append(tr);
        });
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Add Data" onclick="AddData()">
<table id="shoppingBag" class="table">
    <thead>
        <tr>
            <th scope="col">Item</th>
            <th scope="col">Price</th>
            <th scope="col">Quantity</th>
        </tr>
    </thead>
    <tbody>
       
    </tbody>
</table>

如何在AJAX POST之后重新加载视图

3 个答案: