如何传递html的内容与ajax (MVC)

How to pass content of html with ajax (MVC)

本文关键字:ajax MVC 何传递 html      更新时间:2023-09-26

我需要从特定的形式得到HTML,并将其保存在HTML文件,在我的项目。

我有一个builder ajax函数它将HTML发送到服务器然后我保存它

我有一个问题,发送HTML到服务器,如果我发送字符串"Hello word",所有工作,但与"<p>Hello</p>"它不工作。

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

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

This my controller:

 [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: My 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>"

我的ajax返回空错误,所以我不能给你更多的信息。

这是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从服务器在调试模式

您需要使用函数

    html:encodeURIComponent(html);

看到医生

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

  1. 将内容字符串化为JSON

    JSON.stringify({"html":html});

  2. 把你的HTML字符串放在单引号里

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

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

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