Javascript AJAX从post响应将HTML代码加载到div

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

HTML:

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

还尝试了$（'html容器'）.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

parsererror语法错误：JSON中位置0处的意外标记<

但是在开发工具（网络->XHR->响应）中没有错误，只需要我需要的html代码

在PHP中：echo json_encode（$dataStr）；返回损坏的html代码，没有json_encode只使用echo我仍然会得到错误（如上所述）

如何使用AJAX从post请求的响应中获取HTML代码并将其设置为div

UPD：

---

设置dataType:“text”和dataType:“html”将删除上面的错误，如果我设置$（“#html container”），我可以在浏览器检查器中看到所有html代码，但在我的div中看不到它。text（data）所有html将以简单文本的形式加载到div。

尝试根据文档更改返回值

数据类型

：

数据类型（默认值：智能猜测（xml、json、脚本或html）） 类型：字符串您希望从数据库返回的数据类型 服务器。如果未指定，jQuery将根据 响应的MIME类型（在1.4中，XML MIME类型将生成XML） JSON将生成一个JavaScript对象，在1.4中，脚本将执行 脚本，其他任何内容都将作为字符串返回）

因此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

接收任何数据的方法：

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

---

更改后端代码，如下所示

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

我建议只从后端发送“数据”，然后使用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);
    }
});