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&nbsp;- （默认：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();&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; url: "src/items.php",&nbsp; &nbsp; &nbsp; &nbsp; dataType: "html",&nbsp; &nbsp; &nbsp; &nbsp; data: {stype:st},&nbsp; &nbsp; &nbsp; &nbsp; success : function(data) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#html-container').html(data);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; error : function(jqXHR, textStatus, errorThrown) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(textStatus, errorThrown);&nbsp; &nbsp; }});甚至您可以dataType从ajax 方法中删除以接收任何数据：$("#html-container").empty();&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "src/items.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {stype:st},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success : function(data) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#html-container').html(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error : function(jqXHR, textStatus, errorThrown) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(textStatus, errorThrown);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });

Answer 2

更改您的后端代码，如下所示。if (array_key_exists('stype', $_POST)) {&nbsp; &nbsp; $dataStr = funcs_to_generate_html_code();&nbsp; &nbsp; echo json_encode(array( 'html' => $dataStr ));} else {&nbsp; &nbsp; $dataStr = func_to_generate_html_code();&nbsp; &nbsp; echo json_encode(array( 'html' => $dataStr ));}将 html 附加到 dom 的 Javascript 代码。$("#html-container").empty();$.ajax({&nbsp; &nbsp; type: "POST",&nbsp; &nbsp; url: "src/items.php",&nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; data: { stype: st },&nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; $('#html-container').html(data.html);&nbsp; &nbsp; },&nbsp; &nbsp; error: function (jqXHR, textStatus, errorThrown) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(textStatus, errorThrown);&nbsp; &nbsp; }});我建议只从后端发送“数据”，然后使用 javascript 创建新的 HTML 元素并使用这些新元素修改 dom。