如何传递html的内容与ajax (MVC)
本文关键字:ajax MVC 何传递 html | 更新日期: 2023-09-27 17:53:09
我需要从特定的形式得到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 – 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 – 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);
看到医生
您可以通过多种方式做到这一点:-
-
将内容字符串化为JSON
JSON.stringify({"html":html});
-
把你的HTML字符串放在单引号里
[ { "html": '<p>Hello World!</p>' } ];
-
通过添加"转义HTML代码中的双引号
-
使用Encoder.js 当数据传递时使用:
Encoder.htmlDecode(value);
另外,在JSON中传递HTML时,请记住这4件事: