javascript - 如何将ajax成功数据的值显示到html表格中？

Question

我需要在我的 html 表中查看 ajax 成功消息我的cshtml代码是:

@*@{Customer.Models.Customers cust = ViewBag.Customers;
}*@
@{ 
            }

    <center><h1 style="color:red">User details</h1></center>

<div>
    <table class="table">

        <tr>
            <td>ID</td>
            <td>res.Id</td>
        </tr>
        <tr>
            <td>FIRST NAME</td>
            <td>res.Fname</td>
        </tr>
        <tr>
            <td>LAST NAME</td>
            <td>res.Lname</td>
        </tr>
        <tr>
            <td>LOCATION</td>
            <td>res.Location</td>
        </tr>
        <tr>
            <td>Contact</td>
            <td>res.Contact</td>
        </tr>
        <tr>
            <td>Email</td>
            <td>res.Email</td>
        </tr>
        <tr>
            <td>Password</td>
            <td>res.Password</td>
        </tr>
        <tr>
            <td>Role</td>
            <td>res.Category</td>
        </tr>
        <tr>

    </table>
</div>
@section Scripts{
    <script>
            $.ajax({
                contentType: "application/json",
                type: "GET",
                url: "https://localhost:44397/api/Values/Details/" + id,
                success: function (data) {
                    alert('Welcome!');
                    res = data;


                   // window.location.href = "/Home/Details/" + data.id;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $("#postResult").val(jqXHR.statusText);
                }
            });
    </script>
}

有没有办法使用成功数据传入每个表行？也就是说，我希望 res 存储成功数据，然后将其传递给像 res.Fname 这样的表字段(例如)，并且它应该相应地显示数据。

Answer 1

您可以通过多种方式通过 Ajax 响应来填充表格。这是您可以尝试的最易读和最流行的方法。请参阅下面的代码片段。

<table id="YourTableId" class="table table-bordered table-striped table-responsive table-hover">  
    <thead>  
        <tr>  
            <th align="left" class="yourTableTh">YourProperty</th>  
            <th align="left" class="yourTableTh">YourProperty2</th>  
            <th align="left" class="yourTableTh">YourProperty3</th>  
        </tr>  
    </thead>  
    <tbody></tbody>  
</table>                

<script>
        $.ajax({
            contentType: "application/json",
            type: "GET",
            url: "https://localhost:44397/api/Values/Details/" + id,
            success: function (data) {
                alert('Welcome!');
               // res = data;
                        var items = '';  
                        $.each(data, function (i, item) {  
                            var rows = "<tr>"  
                            + "<td class='yourTableTh'>" + item.YourProperty + "</td>"  
                            + "<td class='yourTableTh'>" + item.YourProperty2 + "</td>"  
                            + "<td class='yourTableTh'>" + item.YourProperty3 + "</td>"  
                            + "</tr>";  
                            $('#YourTableId tbody').append(rows);  
                        });  

               // window.location.href = "/Home/Details/" + data.id;
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#postResult").val(jqXHR.statusText);
            }
        });
</script>

使用 C# Viewbag 的另一种方法:

 <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Property Header</th>
                        <th>Property Header</th>
                        <th>Property Header</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in ViewBag.ViewBagName)
                    {
                        <tr>
                            <td>@item.PropertyName</td>
                            <td>@item.PropertyName</td>
                            <td>@item.PropertyName</td>
                        </tr>
                    }
                </tbody>
   </table>

如果您还有任何其他问题，请告诉我。 希望这会有所帮助。