AJAX загрузить HTML код для деления из пост-ответа

Question

Я хочу загрузить простой html код в мой родительский div, после отправки запроса с AJAX.

HTML:

<div id="html-container"></div>  

JS:

$("#html-container").empty();

    $.ajax({

        type: "POST",
        url: "src/items.php",
        dataType: "json",
        data: {stype:st},
        success : function(data) { 
        $('#html-container').html(data);
    },
        error : function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
    }

    });

Также пробовал $ ('# html -container'). Text (данные) , $ ('# html -контейнер'). load (данные)

PHP:

if (array_key_exists('stype', $_POST)) {

        $dataStr = funcs_to_generate_html_code();
        echo "$dataStr";

  } else {

        $dataStr = func_to_generate_html_code();
        echo "$dataStr";

    }

Проблема заключается в :

parsererror SyntaxError: Unexpected token < in JSON at position 0

Но в инструментах разработчика (Сеть -> XHR -> Ответ) ошибок нет, просто html код, что мне нужно.

В PHP: эхо json_encode ($ dataStr); возвращает разрушенный html код, и без json_encode только с echo Я все еще получаю ошибку (выше).

Как можно Я получаю и устанавливаю HTML код для деления из ответа почтового запроса с AJAX?

UPD :

Настройка dataType: "text" и dataType: "html" устраняет вышеуказанную ошибку, и я вижу весь код html в инспекторе браузера, но фактически не вижу его в моем div, если я установил $ ('# html -container'). Text (data) all html загружается в div как простой текст.

Answer 1

Измените свой бэкэнд-код, как показано ниже.

if (array_key_exists('stype', $_POST)) {
    $dataStr = funcs_to_generate_html_code();
    echo json_encode(array( 'html' => $dataStr ));
} else {
    $dataStr = func_to_generate_html_code();
    echo json_encode(array( 'html' => $dataStr ));
}

Javascript код для добавления html к DOM.

$("#html-container").empty();
$.ajax({
    type: "POST",
    url: "src/items.php",
    dataType: "json",
    data: { stype: st },
    success: function (data) {
        $('#html-container').html(data.html);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
    }
});

Я рекомендую отправить просто " data "из серверной части, а затем используйте javascript для создания новых элементов HTML и изменения dom с помощью этих новых элементов.

Answer 2

Попробуйте изменить значение возврата datatype в соответствии с документацией:

dataType - (по умолчанию: интеллектуальное предположение (xml, json, сценарий или html)) Тип: String Тип данных, которые вы ожидаете получить от сервера. Если ничего не указано, jQuery попытается вывести его на основе MIME-типа ответа (XML MIME-тип даст XML, в 1.4 JSON даст объект JavaScript, в скрипте 1.4 выполнит скрипт, и все остальное будет возвращено в виде строки).

https://api.jquery.com/jquery.ajax/

Таким образом, код Jquery будет выглядеть следующим образом :

$("#html-container").empty();

    $.ajax({

        type: "POST",
        url: "src/items.php",
        dataType: "html",
        data: {stype:st},
        success : function(data) { 
            $('#html-container').html(data);
        },
        error : function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
    }
});

Или даже вы можете удалить dataType из метода ajax для получения любых данных:

$("#html-container").empty();

        $.ajax({

            type: "POST",
            url: "src/items.php",
            data: {stype:st},
            success : function(data) { 
                $('#html-container').html(data);
            },
            error : function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });