Проаналізуйте JSON за даними успіху JQuery.ajax

У мене проблеми з отриманням вмісту об’єкта JSON із виклику JQery.ajax. Мій дзвінок:

$('#Search').click(function () {
    var query = $('#query').valueOf();
    $.ajax({
        url: '/Products/Search',
        type: "POST",
        data: query,
        dataType: 'application/json; charset=utf-8',
        success: function (data) {
            alert(data);
            for (var x = 0; x < data.length; x++) {
                content = data[x].Id;
                content += "<br>";
                content += data[x].Name;
                content += "<br>";
                $(content).appendTo("#ProductList");
               // updateListing(data[x]);
            }
        }
    });
});

Здається, об'єкт JSON повертається правильно, оскільки "сповіщення (дані)" відображає наступне

[{"Id": "1", "Name": "Shirt"}, {"Id": "2", "Name":"Pants"}]

але коли я намагаюся відобразити ідентифікатор або ім'я на сторінці, використовуючи:

content = data[x].Id;
content += "<br>";
content += data[x].Name;
content += "<br>";

він повертає на сторінку "невизначений". Що я роблю не так?

Дякую за допомогу.

Дані повертаються у вигляді рядкового представлення JSON, і ви не перетворюєте їх назад у об’єкт JavaScript. Встановіть на, dataTypeщоб 'json'він автоматично перетворювався.

Я рекомендую вам використовувати:

var returnedData = JSON.parse(response);

перетворити рядок JSON (якщо це просто текст) в об’єкт JavaScript.

Це чудово працює, наприклад:

$.ajax({
    url: "http://localhost:11141/Search/BasicSearchContent?ContentTitle=" + "تهران",
    type: 'GET',
    cache: false,
    success: function(result) {
        //  alert(jQuery.dataType);
        if (result) {
            //  var dd = JSON.parse(result);
            alert(result[0].Id)
        }

    },
    error: function() {
        alert("No");
    }
});

Нарешті, вам потрібно використати це твердження ...

result[0].Whatever

Одним із способів переконатися, що такого типу помилок (із використанням рядка замість json) не станеться, - це побачити, що друкується в alert. Коли ви це зробите

alert(data)

якщо дані є рядком, вони надрукують все, що містить. Однак якщо ви надрукуєте об'єкт json. Ви отримаєте таку відповідь у сповіщенні

[object Object]

Якщо це відповідь, то ви можете бути впевнені, що можете використовувати це як об'єкт (у цьому випадку json).

Таким чином, вам потрібно спочатку перетворити рядок у json, перш ніж використовувати його, виконавши це:

JSON.parse(data)

Ну ... ви пройшли приблизно 3/4 шляху ... у вас вже є ваш JSON як текст.

Проблема полягає в тому, що ви, мабуть, обробляєте цей рядок так, ніби це вже був об’єкт JavaScript із властивостями, що стосуються переданих полів.

Це не ... це просто рядок.

Такі запити, як "content = data [x] .Id;" призводять до збою, оскільки JavaScript не знаходить цих властивостей, прикріплених до рядка, який він переглядає ... знову ж таки, це ПРОСТО рядок.

Ви повинні мати можливість просто проаналізувати дані як JSON через ... yup ... метод синтаксичного аналізу об'єкта JSON.

myResult = JSON.parse(request.responseText);

Тепер myResult - це об'єкт javascript, що містить властивості, передані через AJAX.

Це має дозволити вам поводитися з цим так, як ви, здається, намагаєтесь.

Схоже, JSON.parse було додано, коли було додано ECMA5, тому все, що є досить сучасним, повинно мати можливість впоратись із цим власним чином ... якщо вам доводиться обробляти скам’янілі ви, ви можете також спробувати зовнішні бібліотеки, щоб обробити це, такі як jQuery або JSON2 .

Для протоколу, на це вже відповів Енді Е для когось ТУТ .

редагувати - побачив запит на "офіційні або достовірні джерела", і, мабуть, одним із кодерів, котрий я вважаю найбільш достовірним, був би Джон Резіг ~ ECMA5 JSON ~ я би пов'язав із фактичною специфікацією ECMA5 щодо власної підтримки JSON, але я б скоріше зверніться до когось до такого майстра, як Резіг, ніж до сухих специфікацій.

Спробуйте функцію jquery, eachщоб пройтись по об’єкту json:

$.each(data,function(i,j){
    content ='<span>'+j[i].Id+'<br />'+j[i].Name+'<br /></span>';
    $('#ProductList').append(content);
});

Ви можете використовувати метод jQuery parseJSON:

var Data = $.parseJSON(response);

тип вводу Кнопка

<input type="button" Id="update" value="Update">

Я успішно опублікував форму з AJAX у perl. Після опублікування форми контролер повертає відповідь JSON, як показано нижче

$(function() {

    $('#Search').click(function() {
        var query = $('#query').val();
        var update = $('#update').val();

        $.ajax({
            type: 'POST',
            url: '/Products/Search/',
            data: {
                'insert': update,
                'query': address,
            },
            success: function(res) {
                $('#ProductList').empty('');
                console.log(res);
                json = JSON.parse(res);
                for (var i in json) {
                    var row = $('<tr>');
                    row.append($('<td id=' + json[i].Id + '>').html(json[i].Id));
                    row.append($('<td id=' + json[i].Name + '>').html(json[i].Name));
                    $('</tr>');
                    $('#ProductList').append(row);
                }
            },
            error: function() {
                alert("did not work");
                location.reload(true);
            }
        });
    });
});

З jQuery API: з налаштуванням dataType, якщо нічого не вказано, jQuery спробує зробити висновок $.parseJSON()на основі типу MIME (тип MIME для тексту JSON - "application / json") відповіді (у 1.4 JSON дасть об'єкт JavaScript).

Або ви можете встановити значення dataTypeдля jsonавтоматичного перетворення.

Я не впевнений, що з вашим налаштуванням пішло не так. Можливо, сервер неправильно встановлює заголовки. Не впевнений. Як довгий постріл, ви можете спробувати це

$.ajax({
    url : url,
    dataType : 'json'
})
.done(function(data, statusText, resObject) {
   var jsonData = resObject.responseJSON
})

проаналізуйте та перетворіть його в js-об'єкт, ось і все.

success: function(response) {
    var content = "";
    var jsondata = JSON.parse(response);
    for (var x = 0; x < jsonData.length; x++) {
        content += jsondata[x].Id;
        content += "<br>";
        content += jsondata[x].Name;
        content += "<br>";
    }
    $("#ProductList").append(content);
}