AJAX 将 HTML 代码从帖子响应加载到 div

Question

在使用 AJAX 发布请求后，我想将简单的 html 代码加载到我的父 div。

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(data) , $('#html-container').load(data)

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 中： echo json_encode($dataStr); 返回损坏的 html 代码，如果没有json_encode仅使用echo我仍然会收到错误（上图）。

如何使用 AJAX 从发布请求的响应中获取和设置 HTML 代码到 div？

更新：

设置dataType: "text"和dataType: "html"会删除上面的错误，我可以在浏览器检查器中看到所有 html 代码，但在我的 div 中实际上看不到它，如果我设置了$('#html-container' ).text(data) 将所有 html 作为简单文本加载到 div。

Answer 1

尝试根据文档更改您的返回datatype ：

dataType -（默认值：Intelligent Guess（xml、json、script 或 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);
    }
});

或者甚至您可以从ajax方法中删除dataType以接收任何数据：

$("#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);
        }
    });

Answer 2

更改您的后端代码，如下所示。

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 ));
}

将 html 附加到 dom 的 Javascript 代码。

$("#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);
    }
});

我建议只从后端发送“数据”，然后使用 javascript 创建新的 HTML 元素并使用这些新元素修改 dom。