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

【问题标题】：How to reload view after AJAX POST如何在 AJAX POST 后重新加载视图
【发布时间】：2019-08-08 13:54:09
【问题描述】：

作为 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>

【问题讨论】：

标签： javascript html ajax asp.net-core-mvc razor-pages

【解决方案1】：

改变：

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

到：

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

与

改变：

table.appendChild(tr);

到：

table.append(tr);

【讨论】：

【解决方案2】：

在Ajax成功方法之后append_json(response);add下面的代码刷新表格

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

【讨论】：

谢谢！这仅在我将其从成功方法中删除并使其成为函数 remove() 本身的本地时才有效。此外，我必须单击该按钮两次才能发生这种情况。你知道为什么吗？
你可以这样试试。 $(document).ajaxSuccess(function() { $("#shoppingBag").load(window.location + "#shoppingBag"); });

【解决方案3】：

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

或者您可以将 id 添加到 <body>，如 <tbody id="myTestTableBody"> 并将其用于您的 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 调用之外起作用。我真的很想知道如何让它发挥作用！