【问题标题】:How to pass content of html with ajax (MVC)如何使用 ajax (MVC) 传递 html 的内容
【发布时间】:2016-10-31 20:52:23
【问题描述】:

我需要从特定表单中获取 HTML 并将其保存在我项目中的 HTML 文件中。

所以我有构建器 ajax 函数,它将这个 HTML 发送到服务器,然后我保存它。

我在将 HTML 发送到服务器时遇到问题,如果我发送字符串 "Hello word" ,一切正常,但使用 "<p>Hello</p>" 则无法正常工作。

用 ajax 发送 HTML 内容的正确方法是什么?

我知道[ValidateInput(false)],但它不起作用

这是我的控制器:

 [HttpGet]
 [ValidateInput(false)]
 public void UpdateHtml(string html)
     {
        try
         {
             string path1 = @"D:\test\my.html";
             System.IO.File.WriteAllText(path1, html);

                }
                catch (Exception ex)
                {
                }

            }

这是我的 ajax:

function btn_Upload_Click() {

    var html = tinyMCE.activeEditor.getContent();//my html
  //var html = "Hello"//Like this all working
    var token = $('input[name="__RequestVerificationToken"]').val();//checked:OK
    var funcUrl = $("#btn_saveHtml").data("urlaction");//checked :OK
    $.ajax({
        url: funcUrl,
        type: 'GET',
        dataType : "text/xml",
        data: {
            html:html,
            __RequestVerificationToken: token
        },

        success: function (data)
        {
            alert("Good");
        },
        error: function (xhr, status, error) {

            alert(xhr.responseText);
            alert(xhr.status);
            alert(error);
        }
    });

}

Update2:我要发送的 html:

"<p style=\"text-align: center; font-size: 15px;\"><img title=\"TinyMCE Logo\" src=\"//www.tinymce.com/images/glyph-tinymce@2x.png\" alt=\"TinyMCE Logo\" width=\"110\" height=\"97\" /></p>\n<h1 style=\"text-align: center;\">Welcome to the TinyMCE editor demo!</h1>\n<h1><img style=\"float: right; padding: 0 0 10px 10px;\" title=\"Tiny Husky\" src=\"//www.tinymce.com/docs/images/tiny-husky.jpg\" alt=\"Tiny Husky\" width=\"304\" height=\"320\" /></h1>\n<h2>Image Tools Plugin feature<br />Click on the image to get started</h2>\n<p>Please try out the features provided in this image tools example.</p>\n<p>Note that any <strong>MoxieManager</strong> file and image management functionality in this example is part of our commercial offering – the demo is to show the integration.</p>\n<h2>Got questions or need help?</h2>\n<ul>\n<li>Our <a href=\"https://www.tinymce.com/docs/\">documentation</a> is a great resource for learning how to configure TinyMCE.</li>\n<li>Have a specific question? Visit the <a href=\"http://community.tinymce.com/forum/\">Community Forum</a>.</li>\n<li>We also offer enterprise grade support as part of <a href=\"www.tinymce.com/pricing\">TinyMCE Enterprise</a>.</li>\n</ul>\n<h2>A simple table to play with</h2>\n<table>\n<thead>\n<tr>\n<th>Product</th>\n<th>Cost</th>\n<th>Really?</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>TinyMCE</td>\n<td>Free</td>\n<td>YES!</td>\n</tr>\n<tr>\n<td>Plupload</td>\n<td>Free</td>\n<td>YES!</td>\n</tr>\n</tbody>\n</table>\n<h2>Found a bug?</h2>\n<p>If you think you have found a bug please create an issue on the <a href=\"https://github.com/tinymce/tinymce/issues\">GitHub repo</a> to report it to the developers.</p>\n<h2>Finally ...</h2>\n<p>Don't forget to check out our other product <a href=\"http://www.plupload.com\" target=\"_blank\">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p>\n<p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br />All the best from the TinyMCE team.</p>"

我的 ajax 返回空错误,所以我无法为您提供更多信息。

【问题讨论】:

  • __RequestVerificationToken 会导致这个。你在另一个请求中这样使用它吗?我的意思是将不在请求标头中的令牌作为数据发送
  • 你试过这个没有令牌的请求吗?
  • 是的,我试过了,就像我在问题中写的,如果我发送“Hello World”一切正常,问题出在我试图发送的 html 中
  • 对不起,我错过了。我已经尝试过了,我无法解释为什么只发送“

    Hello

    ”时不工作,因为它适用于我的项目。但是使用你的 html 它不起作用,然后我尝试使用 POST 请求而不是 GET 它适用于您的 html。您尝试过发布请求吗?
  • 你能把你的javascript和服务器端代码贴在这里吗?也许我错过了一些小事

标签: javascript c# jquery ajax asp.net-mvc-4


【解决方案1】:

这是ajax请求

$.ajax({
        url: '@Url.Action("Test")',
        type: 'POST',
        datatype: 'text/xml',
        data: { "html": "<p style=\"text-align: center; font-size: 15px;\"><img title=\"TinyMCE Logo\" src=\"//www.tinymce.com/images/glyph-tinymce@2x.png\" alt=\"TinyMCE Logo\" width=\"110\" height=\"97\" /></p>\n<h1 style=\"text-align: center;\">Welcome to the TinyMCE editor demo!</h1>\n<h1><img style=\"float: right; padding: 0 0 10px 10px;\" title=\"Tiny Husky\" src=\"//www.tinymce.com/docs/images/tiny-husky.jpg\" alt=\"Tiny Husky\" width=\"304\" height=\"320\" /></h1>\n<h2>Image Tools Plugin feature<br />Click on the image to get started</h2>\n<p>Please try out the features provided in this image tools example.</p>\n<p>Note that any <strong>MoxieManager</strong> file and image management functionality in this example is part of our commercial offering &ndash; the demo is to show the integration.</p>\n<h2>Got questions or need help?</h2>\n<ul>\n<li>Our <a href=\"https://www.tinymce.com/docs/\">documentation</a> is a great resource for learning how to configure TinyMCE.</li>\n<li>Have a specific question? Visit the <a href=\"http://community.tinymce.com/forum/\">Community Forum</a>.</li>\n<li>We also offer enterprise grade support as part of <a href=\"www.tinymce.com/pricing\">TinyMCE Enterprise</a>.</li>\n</ul>\n<h2>A simple table to play with</h2>\n<table>\n<thead>\n<tr>\n<th>Product</th>\n<th>Cost</th>\n<th>Really?</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>TinyMCE</td>\n<td>Free</td>\n<td>YES!</td>\n</tr>\n<tr>\n<td>Plupload</td>\n<td>Free</td>\n<td>YES!</td>\n</tr>\n</tbody>\n</table>\n<h2>Found a bug?</h2>\n<p>If you think you have found a bug please create an issue on the <a href=\"https://github.com/tinymce/tinymce/issues\">GitHub repo</a> to report it to the developers.</p>\n<h2>Finally ...</h2>\n<p>Don't forget to check out our other product <a href=\"http://www.plupload.com\" target=\"_blank\">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p>\n<p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br />All the best from the TinyMCE team.</p>" },
        error: function () {
            console.log("error");
        },
        success: function () {

        }
    })

还有服务器代码

    [HttpPost]
    [ValidateInput(false)]
    public void Test(string html)
    {

    }

当然我没有任何令牌。我可以在调试模式下从服务器捕获 html。

【讨论】:

  • 我从 get 更改为 post 并且所有的工作,但我仍然不明白为什么 data="Hello" 工作和 data "

    Hello

    " 没有!?! ?!?!我什至使用了将内容字符串化为 JSON ......我真的很困惑......我花了很多时间在这个问题上 thnks
  • 我也很困惑 :)
  • 因为您的控制器是 POST 但您尝试使用 GET 请求它
【解决方案2】:

你需要使用函数

    html:encodeURIComponent(html);

Doc

【讨论】:

    【解决方案3】:

    你可以通过多种方式做到这一点:-

    1. 将内容字符串化为 JSON。

      JSON.stringify({'html':HTML});

    2. 将您的 HTML 字符串放在单引号中。

      [
          {
              "html": '<p>Hello World!</p>'
          }
      ];
      
    3. 通过添加“”来转义 HTML 代码中的双引号。

    4. 使用Encoder.js 数据传递时使用:Encoder.htmlDecode(value);

    另外,在 JSON 中传递 HTML 时,请记住 these 4 件事。

    【讨论】:

    • 这是 JSON.stringify({'html':HTML});不是 JSON.stringify({'html':html}) 小写?任何小写的方式都不起作用
    • 您能否分享您从 tinyMCE.activeEditor.getContent() 获得的 HTML 字符串
    • 我用过 var jsonString = JSON.stringify(strHtml); ,并且我已经更新了我的 html,你可以在 qustion 中看到它,但它仍然无法正常工作。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-24
    • 1970-01-01
    • 2019-05-16
    • 1970-01-01
    • 1970-01-01
    • 2019-03-31
    相关资源
    最近更新 更多