>

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>

  • 답변 # 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>
    
    

  • 이전 jquery - 레이블을 제거하고 막대 차트의 툴팁에 값만 표시
  • 다음 javascript - Nuxt JS로 Vuetify js 최적화