使用 ajax 请求使用 html 值序列化输入答案

【问题标题】：Serialize input with html value using ajax request使用 ajax 请求使用 html 值序列化输入
【发布时间】：2016-05-20 08:55:35
【问题描述】：

我使用 jquery.ajax post 使用 c# 将数据发送到服务器，但它处理错误这是我的代码

$(function(){
  $('#frmSubmit').on('submit', function(e){
    e.preventDefault();
    var frm = $(this);
    
    $.ajax({
      url: frm.attr('action'),
      type: frm.attr('method'),
      data: frm.serialize(),
      dataType: 'JSON',
      success: function(){
        alert('success');
      },
      error: function(){
        alert('error');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="frmSubmit" method="post" action="/announcement/create">
  Title:<br/>
  <input type="text" id="title" name="title" /> <br/>
  Body:<br/>
  <textarea id="body" name="body"></textarea> <br/>
  
  <button type="submit">submit</button>
 </form>

我的问题是，当我在 textarea 上输入 html 代码时，结果是错误的，但是当我输入普通文本时，结果还可以，所以我的结论是序列化表单不接受任何 html 代码，我不不知道为什么。请帮帮我。

新更新 实际上...我将使用此方法来使用 trix-editor (WYSIWYG) 存储 html 内容.. 这是link 但是问题是上面说的...请帮我解决这个问题...

非常感谢您的回复，提前谢谢您

【问题讨论】：

为什么在提交中需要ajax？
@user2181397，这有什么问题？
@user2181397 只需将数据从 from 发送到服务器端（c#）
一个问题serialize 在您的问题中拼写错误。 seriaize?这是偶然的吗？
请发布导致问题的示例内容。这可能会有所帮助。

标签： javascript c# jquery html ajax

【解决方案1】：

您需要在粘贴到文本区域的 html 文本中使用 HTML 实体。像这样的迹象 http://www.w3schools.com/html/html_entities.asp

我自己没用过。但经过一番谷歌搜索后，我发现您需要在发布之前将 html 文本编码为 html 实体。有人编写了一些方法来对其进行编码和解码（https://gist.github.com/CatTail/4174511）。

希望对你有帮助。

【讨论】：

【解决方案2】：

问题出在您的服务器端。如果您使用 ASP.NET，它具有内置的请求验证功能，可自动帮助防止 XSS 和 HTML 注入攻击。您的 html 内容会被这样处理。

有几个选项可以在帖子内容中允许 html 内容：

使用 [AllowHtml] 属性装饰需要 HTML 的模型类的属性。

public class DummyData 
{
    public string Title { get; set; }        
    [AllowHtml]
    public string Body { get; set; }
}

在您接收发布数据的方法上添加[ValidateInput(false)]。 Bellow 是带有 ASP MVC 控制器的示例：
```
[HttpPost]
[ValidateInput(false)]   
public ActionResult SaveYourData(DummyData model)
{
    ...
}
```

【讨论】：

你好@Dfirmansyah.. 我明白你的意思，我认为你的答案将是我的解决方案，但问题是当我通过为控制器的特定操作分配断点来调试服务器端时。 ..它在调试会话期间并没有真正在断点上流动，但ajax告诉我在textarea上输入的值一定有问题，即当我输入一些HTML代码时它会给出错误，即使没有流动操作，但是当我只输入普通文本时，调试会话将在断点处流动……希望你能理解我……
它不会进入你的动作控制器，因为验证是在你的动作方法执行之前进行的。
关于那个如果我用 html 代码输入一个值......但是如果我在 textarea 上输入一个普通文本，它将进入动作控制器......
是的，因为普通文本是有效数据，这就是它通过验证并输入您的操作方法的原因。但是 html 文本被视为潜在危险数据，因此它会引发验证错误并且不会继续执行您的操作方法。我的意思是这里的验证是由 ASP.NET 执行的 HTTP 请求验证，而不是表单输入验证。
啊，我看你是对的，我认为这就是问题所在，但是......有没有其他方法可以绕过向 textarea 设置 html 值的错误验证？

【解决方案3】：

尝试示例

 <html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 



  </head>
  <body>
  <form enctype="multipart/form-data" action="/b.php" method="post">
  <input type="text" value="<html>" name="trxid" value="<?=$trx?>">
  <input type="" value="<td>" name="file">
  <input type="button" id="submit_custom" onclick="f(); return false;">
  </form>
  </div>
  </body>
  </html>


  <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>

  <script type="text/javascript">

  function f(){   
      var frm = $('form');

      $.ajax({
        url: frm.attr('action'),
        type: frm.attr('method'),
        data: frm.serialize(),

       /* need to be like this */
       processData: false,
       contentType: false,
       dataType: 'JSON',
       /**/

        success: function(data, textStatus, jqXHR){
        alert('success');

  response = data;

  alert('response json value  '+response.a);
        },
        error: function(){
          alert('error');
        }
      });
  }

  </script>

【讨论】：

您的代码工作正常，问题在于您的服务器或您的 ASP 代码或您使用的代码
这是场景......当我使用带有 JSON 数据类型的 processData、contentType 时，frm.serialize() 接受普通文本和 html 代码值，但它将空数据传递给服务器，当我排除这两个属性时... frm.serialize() 接受普通文本并将完整的数据传递给服务器...但是使用 html 代码...它仍然给我一个错误而没有在服务器上流动侧面...即使您上次发帖，我也尝试了您的所有代码，但它给出的输出相同... :(
try var postData = new FormData(); postData.append('input_name', $('input').val(); postData.append('textarea_name', $('textarea').val(); // 更改为您的输入和文本区域 [data=data] 的选择器。并将帖子中的序列化替换为data: postData,
你也可以删除#c中的html标签，然后再做其余的代码。我php 一切正常
或在 js 中替换 html 标记并在使用 ajax 帖子发送 tata 后，但不安全

【解决方案4】：

我成功了！

感谢 @Mitch 给了我一个使用 Ajax 其他属性的想法...

HTML：

<form id="frmSubmit" method="post" action="/announcement/create">
  Title:<br/>
  <input type="text" id="title" name="title" /> <br/>
  Body:<br/>
  <textarea id="body" name="body"></textarea> <br/>

  <button type="submit">submit</button>
 </form>

JS：但我使用的唯一属性是 contentType，我将其设置为 application/json，因为我通过使用 dataType:'JSON' 向服务器发送数据。

$(function(){
  $('#frmSubmit').on('submit', function(e){
    e.preventDefault();
    var frm = $(this);

    data = { 
      title: $("#title").val(),
      body: $("#body").val()
    } 

    $.ajax({
      url: frm.attr('action'),
      type: frm.attr('method'),
      data: JSON.stringify(data),
      dataType: 'JSON',
      contentType: 'application/json',
      success: function(){
        alert('success');
      },
      error: function(){
        alert('error');
      }
    });
  });
});

如您所见。我用JSON.stringify(data) 替换了序列化表单，因为我需要从表单中获取所有数据并将值转换为 JSON 字符串，因为frm.serialize() 不允许我使用 HTML 代码输入值。它给了我一个调试会话期间数据未发送到服务器端的错误

感谢所有试图解决我问题的人

【讨论】：