홈>2020-03-18 15:38

javascript - AJAX POST 후 뷰를 다시로드하는 방법

AJAX를 처음 접했을 때이 문제가 발생하여 문제를 해결하지 못했습니다. 나는 아약스 게시물이 객체를 검토하기 위해 테이블을 새로 고치기를 원했다. 내가 시도한 모든 것은 쓸데없는 것이었다.

OnPost() 를 게시하지 않기 위해 ajax 응답이 JSON 결과라고 가정하십시오. 암호. 아약스를 사용하여 제품의ID를 보낸 다음 해당ID를 사용하여 제품을 제거합니다.

그런 다음 동일한 메소드 OnGet() 를 호출합니다. 업데이트 된 목록을 반환하는 테이블을 채우는 데 사용합니다. 크롬 디버그 도구에서 업데이트 된 목록과 함께 응답이 성공적으로 반환됩니다. 내 목록으로 다시 가져 오는 방법을 모르겠습니다. 미리 감사드립니다.

   @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>

javascripthtmlajaxasp.net-core-mvcrazor-pages

답변 # 1
이 append_json(response); 후 Ajax 성공 방법 아래 코드를 추가하여 테이블을 새로 고침
```
$("#shoppingBag").load(window.location + " #shoppingBag");
```

답변 # 2

변경 :

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

to :

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

그리고

변경 :

table.appendChild(tr);

to :

table.append(tr);

답변 # 3

데이터를 메인 <table> 에 추가하고 있습니다 표를 검사하면 추가 된 html.을 볼 수 있지만표본문에 데이터를 추가해야합니다. 이를 위해 당신은 $("#shoppingBag tbody").append(tr); 를 사용할 수 있습니다

또는 <body> 에id를 추가 할 수 있습니다 <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>

Python2.net

javascript - AJAX POST 후 뷰를 다시로드하는 방법

관련 자료