尝试将 html 标记发送到服务器时，Ajax 调用不起作用答案

【问题标题】：Ajax call not working when trying to send html markup to server尝试将 html 标记发送到服务器时，Ajax 调用不起作用
【发布时间】：2014-04-19 10:19:29
【问题描述】：

我正在使用jquery text editor 插件来创建 html 标记。我将文本编辑器创建的标记放在一个 js 变量中，然后使用 ajax 调用将该变量发布到服务器。

在cshtml中标记：

<div>
   <div id="textEditor">@Html.Raw(Model.htmlMarkUp)</div>
</div>
<input type="button" value="Save" onclick="SaveChanges();" />

JS：

$(document).ready(function () {
    $('#textEditor').jqte();
});

    function SaveChanges(){
    var txtContent = $(".jqte_editor").html();//.jqte_editor is the div added by plugin


        var path = '/Pages/saveChanges';
        $.ajax({
            type: "POST",
            url: path,
            data: { htmlMarkUp: txtContent },
            success: function (result) { alert(result) },
            error: function () { }
        });
    }

型号：

public class MyModel
{
  public string htmlMarkUp{ get; set; }
}

控制器：

public string saveChanges(MyModel oModel)
{
 ....
}

问题：

动作结果被正确调用，除非我不使用插件中提供的任何美化工具，即如果我在文本编辑器中编写了一个简单的纯文本，则 ajax 调用正常工作，但只要我使用任何工具像粗体工具一样，ajax 调用停止工作。

首先我认为这是由于 web config 中 json 大小的限制，但这也不是问题。

为了指定 json 大小，我在 web.config 中编写如下：

<system.web.extensions>
  <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="5000">
        </jsonSerialization>
      </webServices>
  </scripting>
</system.web.extensions>

问题与标记大小无关。问题是，当我使用文本编辑器插件的粗斜体等任何工具时。

出了什么问题

提前致谢。

【问题讨论】：

标签： javascript jquery ajax asp.net-mvc-4 jqte

【解决方案1】：

我遇到了问题。问题不在于文本编辑器，而在于 asp 安全性。每当我尝试通过 ajax 向我的服务器发送 html 内容（包含 html 标签）时，服务器都会拒绝此类请求。

当我不使用任何文本编辑器工具时，它被认为是纯字符串，但一旦我使用任何工具（如粗体工具），我收集文本编辑器标记的变量也有 html 标签。由于安全问题，该参数到达服务器时被服务器拒绝。

因此，为了跳过此安全检查，我将以下属性添加到我的操作结果中：

[ValidateInput(false)]
public string saveChanges(MyModel oModel)
{
 ....
}

这是服务器端解决方案。您还可以通过将变量编码为 base64 编码来处理客户端的问题：

var txtContent = $(".jqte_editor").html();

var encodedHtml =  $.base64.encode(txtContent );

【讨论】：

底部的返回错误“$.base64 is undefined”对我来说。使用 var encodedHtml = btoa(txtContent);而是

【解决方案2】：

你需要序列化你的文本编辑器的内容

   $.ajax({
        type: "POST",
        url: path,
        data: $('.jqte_editor').serialize(),
        success: function (result) { alert(result) },
        error: function () { }
    });

另外，您的 SaveChanges 方法是否具有 [Post] 属性？

我在数据大小方面遇到了类似的问题并使用了 appSetting

<appSettings>
    <add key="aspnet:MaxJsonDeserializerMembers" value="150000" />
</appSettings>

【讨论】：