如何在 json 中格式化 html 的字符串

Question

我正在开发一个生成 html 文件的工具。代码相当简单。用户单击 post 按钮，textarea 中的内容将发送到端点。我已经尝试 post 将 html 作为 json 字符串。

预计调用 saveContent 方法。来自 textarea 元素的值被连接成一个字符串。此字符串是发送到服务器的 json。请求完成后，应该返回 201 响应。

实际调用 saveContent 方法。来自 textarea 元素的值被连接成一个字符串。此字符串是发送到服务器的 json。返回 400 响应。

这里是字符串的例子

{"content":"<div id="maincontentstyle">
    <center>
        <div id="boxstyle">
            <h3 id="title">title</h3>
                <center>
                    <div class="source">
                        <div id="s1" class="draggyBox-small">
                            k1
                        </div>
                        <div id="s2" class="draggyBox-small">
                            k2
                        </div>
                    </div>
                    </center>
                    <table id="tablestyle">
                        <tr>
                        <td id="row1">
                            <div id="t1" class="ltarget"></div>
                        </td >
                        <td id="d1">
                            d1
                            </td >
                        </tr>
                        <tr>
                        <td id="row2">
                            <div id="t2" class="ltarget"></div>
                        </td >
                        <td id="d2">
                            d2
                            </td >
                        </tr>
                    </table>
                </center>
        </div>
    </center>
</div>"}

这是 saveContent 方法

function saveContent(){
        console.log("calling save content");
        var html_content = document.getElementById("generated_html_textarea");
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/wordmatch", true);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xhr.onreadystatechange = function()
        {
            if(xhr.readyState == 4 && xhr.status == 201) {
                console.log("content saved");
            }
            else{
                console.log("content was not save successfully");
            }
        }
        console.log('{"content":\"'
                +html_content.value+'\"}');
        xhr.send('{"content":\"'
                +html_content.value+'\"}');
    }

Answer 1

不要通过连接字符串来创建 JSON。您没有正确转义所有嵌套引号，将换行符转换为 \n，等等

在 JavaScript 对象上使用 JSON.stringify()：

xhr.send(JSON.stringify({content: html_content.value}));

如何在 json 中格式化 html 的字符串

How to format a string of html in json

javascript

xmlhttprequest