如何使用jQuery AJAX 将json函数返回的数据追加到html表中?

wd2eg0qa  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(135)

我在剃刀www.example.com工作asp.net。我面临的问题是我无法将json返回的数据追加到html表中
当尝试使用jQuery AJAX 追加表html时,我得到错误
无法读取空阅读的属性,正在读取函数中的公司名称。对象中的每个。成功
我的代码详细信息
第一次显示数据时

<table id="myDataTable" class="table" style="margin-top:20px;">
    <thead>
        <tr>
            <th>Company Name</th>
            <th>Branch Name</th>
            <th>User Name</th>
            <th>User Type</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td>@Model.MyData.CompanyName</td>
            <td>@Model.MyData.BranchName</td>
            <td>@Model.MyData.UserName</td>
            <td>@Model.MyData.UserType</td>
            <td>
                <button id="editDataBtn" style="width:100px;" class="btn btn-primary edit-btn" data-id="@Model.MyData.ID">Edit</button>
            </td>
        </tr>

    </tbody>
</table>

要通过在表html上追加来重新加载数据,请执行以下操作

$("#updatedatabtn").click(function () {
                var userId = $("#userId").val();
                $.ajax({
                    url: '?handler=RefreshDataTable',

                    dataType: 'json',
                    data: { UserId: userId },
                    success: function (result) {
                        console.log(result);
                        $("#myDataTable tbody").empty();
                        $.each(result, function (index, item) {
                            $("#myDataTable tbody").append("<tr><td>" + item.CompanyName + "</td><td>" + item.BranchName + "</td><td>" + item.UserName + "</td> </tr>");
                        });
                    },
                    error: function (xhr, status, error) {
                        console.error("AJAX request failed: " + error);
                    }
                });
            });
    [BindProperty]
    public UserDto MyData { get; set; }

public JsonResult OnGetRefreshDataTable(string UserId)
        {
            var result = userService.GetUserDetails(UserId.ToString());
            MyData = result.Result;
            return new JsonResult(MyData);

        }

当调用RefreshDataTable的API时,我得到以下返回数据:

{
    "vLoginName": "9595",
    "vPassword": "qvUBTS3WkZ/mFbpDQjQsFjsyLR9ehAEWqLedckm3pKZgUlZ/IsH9PFuDXsOto3dXgByvSXRS9ynsBahj38SSkw==",
    "userMode": "A",
    "id": 230,
    "failedAttempts": 0,
    "userName": "ADC Test User",
    "branchName": "KFoundation-Aweer",
    "branchCode": "101KF06",
    "companyName": "Union Co-Operative Society",
    "userType": "S ",
    "accountStatus": null
}

返回的函数将只返回一个对象,因为我显示用户详细信息。
问题详细信息图像

更新后的职位后,适用的答案张贴在下面我得到的数据未定义的所有行

Company Name    Branch Name User Name   User Type   Actions
undefined   undefined   undefined
undefined   undefined   undefined
undefined   undefined   undefined
undefined   undefined   undefined
undefined   undefined   undefined
undefined   undefined   undefined
undefined   undefined   undefined
undefined   undefined   undefined
undefined   undefined   undefined
m2xkgtsf

m2xkgtsf1#

尝试:

$("#myDataTable tbody").append("<tr><td>" + item.companyName + "</td><td>" + item.branchName + "</td><td>" + item.userName + "</td> </tr>");

更新:
返回的函数将只返回一个对象,因为我显示用户详细信息。
尝试修改success函数,如:

success: function (result) {
                console.log(result);
                $("#myDataTable tbody").empty();
                $("#myDataTable tbody").append("<tr><td>" + result.companyName + "</td><td>" + result.branchName + "</td><td>" + result.userName + "</td> </tr>");
                //$.each(result, function (index, item) {
                   

                //        $("#myDataTable tbody").append("<tr><td>" + item.companyName + "</td><td>" + item.branchName + "</td><td>" + item.userName + "</td> </tr>");
                  
                //});
            },

相关问题