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

    }

});

甚至您可以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);

        }

    });

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。