如何在AJAX POST之后重新加載視圖
[英]How to reload view after AJAX POST
問題描述
作為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">×</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>
3 個解決方案
解決方案1
2 2019-03-18 08:44:16
在此append_json(response);之后的Ajax成功方法中append_json(response); 添加以下代碼以刷新表
$("#shoppingBag").load(window.location + " #shoppingBag");
解決方案2
0 2019-03-18 08:38:39
更改：
var table = document.getElementById('shoppingBag');
至：
var table = $('#shoppingBag tbody');
和
更改：
table.appendChild(tr);
至：
table.append(tr);
解決方案3
0 2019-03-18 09:17:02
您將數據附加到主<table>如果您檢查表，則可以看到附加的html。，但是您需要為此在表主體中附加數據，可以使用$("#shoppingBag tbody").append(tr);
或者您可以像<tbody id="myTestTableBody">一樣將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發布后更新視圖而無需重新加載
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.