Jquery .ajax не возвращает полезных данных

У меня есть скрипт jquery в моем файле, который говорит это:

<script type="text/javascript">
$(document).ready(function(e){
    $('#myButton').click(function(e){
        var formdata = {name: 'Alan', hobby: 'boxing'};
        var submiturl = 'http://localhost/cake/gronsters/testJSON/';
        $.ajax({
            type: "POST", 
            url: submiturl,
            data: formdata,
            success: function(message){
                console.log(message);
            }
        });
        e.preventDefault();
    })
});

Затем у меня есть скрипт php на testJSON, который говорит это:

public function testJSON(){
    $name = $this->request->data['name'] . '-Sue';
    $hobby = $this->request->data['hobby'] . ' for donuts';
    $data = array(  'name' => $name, 'hobby' => $hobby);
    echo json_encode($data);
}

Место, где console.log ищет сообщение, дает мне {"name":"Alan-Sue","hobby":"boxing for donuts"}, что кажется правильным, за исключением того, что сразу за ним следует полный html моей веб-страницы, И если я попробую console.log(message.name), он скажет "undefined".

Что тут происходит?

Источник

3 ответа

Решение

Вы находитесь на правильном пути, хотя, как уже упоминали другие, похоже, что вы используете MVC-фреймворк для своего веб-сайта, и он включает содержимое вашей веб-страницы после отображения строки JSON. jQuery/JavaScript не может проанализировать JSON, если в ответе есть другой случайный текст или символы. Вам нужно будет использовать exit; или же die(); после отображения JSON, как показано в следующем примере...

public function testJSON(){
    $name = $this->request->data['name'] . '-Sue';
    $hobby = $this->request->data['hobby'] . ' for donuts';
    $data = array(  'name' => $name, 'hobby' => $hobby);
    // Will halt the script and echo the json-encoded data.
    die(json_encode($data));
}

Также вам нужно убедиться, что jQuery анализирует ответ как JSON. По умолчанию он пытается сделать разумное предположение о том, какой тип данных возвращается, но вы не всегда можете на это полагаться. Вы должны добавить dataType вариант вызова AJAX, как в следующем примере...

<script type="text/javascript">
$(document).ready(function(e){
    $('#myButton').click(function(e){
        // It is best practice to "preventDefault" before any code is executed.
        // It will not cause the ajax call to halt.
        e.preventDefault();
        var formdata = {name: 'Alan', hobby: 'boxing'};
        var submiturl = 'http://localhost/cake/gronsters/testJSON/';
        $.ajax({
            type: "POST", 
            url: submiturl,
            data: formdata,
            // This is the proper data type for JSON strings.
            dataType: 'json',
            success: function(message){
                // JSON is parsed into an object, so you cannot just output
                // "message" as it will just show "[object Object]".
                console.log(message.name);
            }
        });
    });
});
</script>

Я включил некоторые комментарии в код, чтобы помочь лучше объяснить. Надеюсь, это поможет вам немного больше. Вам также не нужно использовать полный $.ajax функционировать, если вы не планируете использовать обработчики ошибок или любые другие более продвинутые опции в этой функции. Кроме того, вы можете сократить свой код с помощью $.post и выполнить то же, что и ваш оригинальный пример с меньшим количеством кода.

<script type="text/javascript">
$(document).ready(function() {
    $('#myButton').click(function(e){
        e.preventDefault();
        var formdata = {name: 'Alan', hobby: 'boxing'};
        var submiturl = 'http://localhost/cake/gronsters/testJSON/';

        $.post(submiturl, formdata, function(message) {
            console.log(message.name);
        });

    });
});
</script>

Дополнительные параметры и информация об использовании $.ajax jQuery.ajax ();
Больше информации о $.post jQuery.post ();

Источник

Похоже, ваша /testJSON/ страница выводит больше, чем просто то, что написано в вашей публичной функции. Если вы используете mvc или любой другой фреймворк, вы должны немедленно выйти или умереть после этого эхо-кода json_encode, в противном случае, вероятно, другая часть страницы все равно будет отображаться.

Источник

Перед попыткой записи message.name проанализируйте переменную сообщения как json.

data = $.parseJSON(message);
console.log(data.name);

Также выполните выход в скрипте php после оператора echo и проверьте..

Источник
Другие вопросы по тегам