Ajax请求获取XML内容后无法渲染标签与原有格式如何解决

问题原因 #

• 前端使用html()方法插入XML内容时，浏览器会将XML标签识别为未知HTML标签直接忽略，仅渲染标签内的文本，所以看不到XML标签
• 从数据库取出的原始XML是紧凑无缩进的单行格式，直接展示没有层级结构
• 现有代码的ID选择器存在语法错误，#和ID名之间多了空格，会导致元素选中失败

解决方案 #

可以任选以下两种方案之一实现需求：

方案1：前后端配合修改（性能更优） #

第一步：修改后端控制器代码

完成XML格式化和特殊字符转义，避免前端重复处理：

class RequestResponseController extends Controller
{
    public function show_data(Request $request){
        $rr = RequestResponse::find($request->id);
        $rawXml = $rr->response;

        // 格式化XML，添加缩进换行
        $dom = new DOMDocument();
        $dom->loadXML($rawXml);
        $dom->preserveWhiteSpace = false;
        $dom->formatOutput = true;
        $formattedXml = $dom->saveXML();

        // 转义HTML特殊字符，防止标签被解析
        return htmlspecialchars($formattedXml);
    }
}

第二步：修改前端Ajax回调

修正选择器语法，改用text()方法配合<pre>标签渲染内容，保留格式：

function show_request_response (id, type) {
    $.ajax ({
        url: "/request_responses/show_data",
        data: {
            "_token": "{{csrf_token()}}",
            "id" : id,
            "type": type,
        },
        method: "POST",
        async: false,
        success: function (xmlResponse) {
            // 修正ID选择器语法，去掉#后的空格
            $('#exampleModal').modal('show');
            $('#exampleModal .modal-title').html("Response XML");
            // 用pre标签包裹内容，保留缩进换行，用text()避免解析标签
            $('#exampleModal .modal-body').html(`<pre>${xmlResponse}</pre>`);
        }
    });
    return false;
}

方案2：仅前端修改（无需调整后端逻辑） #

如果不方便修改后端代码，可以在前端完成XML的格式化和渲染：

第一步：新增XML格式化工具函数

function formatXml(xml) {
    const dom = new DOMParser().parseFromString(xml, 'text/xml');
    const xslt = new DOMParser().parseFromString(`<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <xsl:output method="xml" indent="yes"/>
        <xsl:template match="/"><xsl:copy-of select="."/></xsl:template>
    </xsl:stylesheet>`, 'text/xml');
    const xsltProcessor = new XSLTProcessor();
    xsltProcessor.importStylesheet(xslt);
    const resultDoc = xsltProcessor.transformToDocument(dom);
    return new XMLSerializer().serializeToString(resultDoc);
}

第二步：修改Ajax回调逻辑

function show_request_response (id, type) {
    $.ajax ({
        url: "/request_responses/show_data",
        data: {
            "_token": "{{csrf_token()}}",
            "id" : id,
            "type": type,
        },
        method: "POST",
        async: false,
        success: function (xmlResponse) {
            $('#exampleModal').modal('show');
            $('#exampleModal .modal-title').html("Response XML");
            // 格式化XML
            const formattedXml = formatXml(xmlResponse);
            // 用pre+text()渲染
            $('#exampleModal .modal-body').html('<pre></pre>');
            $('#exampleModal .modal-body pre').text(formattedXml);
        }
    });
    return false;
}

内容的提问来源于stack exchange，提问作者Juan