Jyoti panigrahi Ответов: 1

Я собираюсь привести в исполнение с jQuery AJAX-вызов, используя ASP.NET с веб-сервиса#

Ниже приведен мой HTML-код:
<table id="tblEmployees">
<tbody>
<tr>
    <th>First Name</th>
    <th>Age</th>
    <th>Salary</th>
    <th>Department</th>
</tr>
</tbody>
<tbody>
</tbody>
</table>

а вот мой AJAX-код jquery.
Я получаю ответ от службы в консоли.
Но данные ответа не привязываются к таблице.. Может кто нибудь пожалуйста помочь
$(document).ready(function () {
    $("#btnShowData").on("click", function (e) {
        e.preventDefault();
        
        $("#tblEmployees").empty();
        $.ajax({
            type: "GET",
            url: "GetAndInsertData.asmx/GetEmployee",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnErrorCall
        });

        function OnSuccess(response) {
            console.log(response.d);
            var data = response.d; 
            $(data).each(function (index, emp) {
                employeeTable.append('<tr><td>' + emp.FirstName +
                    '</td><td>' + emp.Age +
                    '</td><td>' + emp.Salary +
                    '</td><td>' + emp.Dept + '</td></tr>');
            });
            console.log(data);
        }
        function OnErrorCall(response) {
            console.log(error);
        }
    });
});


Что я уже пробовал:

Я попробовал использовать JSON.stringify(response.d); для преобразования данных . но все равно не получается

F-ES Sitecore

Что такое в ответ.d?

1 Ответов

Рейтинг:
0

Richard Deeming

Цитата:
employeeTable.append(...

Вы еще не объявили о своем решении. employeeTable переменная в любом месте вашего кода.

Вы также захотите добавить строки к <tbody> а не прямо к столу, а только опустошить его. <tbody> чтобы вы сохранили свои заголовки.

И твой первый <tbody> должно быть а <thead>.
<table id="tblEmployees">
<thead>
<tr>
    <th>First Name</th>
    <th>Age</th>
    <th>Salary</th>
    <th>Department</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
$(function () {
    $("#btnShowData").on("click", function (e) {
        e.preventDefault();
        
        var tbody = $("#tblEmployees > tbody:last").empty();
        
        $.ajax({
            type: "GET",
            url: "GetAndInsertData.asmx/GetEmployee",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnErrorCall
        });

        function OnSuccess(response) {
            var data = response.d; 
            console.debug(data);
            
            $(data).each(function (index, emp) {
                tbody.append($("<tr/>")
                    .append($("<td/>").text(emp.FirstName))
                    .append($("<td/>").text(emp.Age))
                    .append($("<td/>").text(emp.Salary))
                    .append($("<td/>").text(emp.Dept))
                );
            });
        }
        
        function OnErrorCall(response) {
            console.error(error);
        }
    });
});
С этими изменениями ваш код должен работать. Если это не так, то вам нужно проверить ответ от вашего AJAX-вызова.