javascript - 动态构建包含 html 的 ajax 调用的数据字符串

Question

很长一段时间以来，我一直在使用下面的代码来动态构建一个表示要在 ajax 调用中使用的键值对的字符串。

这对于我最初的简单需求来说非常有效。

// make an array of strings representing key value pairs
var feedback = ['var1=val1', 'var2=val2', 'var3=val3' ]; 
// join each pair with "&" seperating them
var dataString = feedback.join('&');         

// make an ajax call 
  $.ajax({
type: "POST",
url: "_php/feedback.php",
data: dataString, //pass in the built vars 
success: function() {
    // do stuff...
}
});

我现在需要将 html 作为数据字符串中的值发送。我注意到的第一件事是包含“&”的 html 将成为一个问题，因此我使用 var2=<span>&nbsp;val2<span> 做了一个简单的测试。 :

  // make any array of strings representing key value pairs
      var feedback = ['var1=val1', 'var2=<span>&nbsp;val2<span>', 'var3=val3' ]; 
      // join each pair with "&" seperating them
      var dataString = feedback.join('&');       

      // amke an ajax call 
        $.ajax({
      type: "POST",
      url: "feedback.php",
      data: dataString, //pass in the built vars 
      success: function(info) {
         $('#result').html(info);
      }
      });

然后在我的 php 页面中:

<?php

$var1=$_POST['var1'];
$var2=$_POST['var2'];
$var3=$_POST['var3'];

echo $var1.'<br>'.$var2.'<br>'.$var3.'<br>';
?>

我希望脚本返回:

val1<br><span>&nbsp;val2<span><br>val3<br>

但是，正如我怀疑的那样，返回输出是:

val1<br><span><br>val3<br>

快速查看检查器会显示:

如何动态创建与 data: dataString, 一起使用的字符串在可能包含 html 的 ajax 调用中？

我尝试搜索此内容，但我所能找到的只是“如何使用 html 表单发送帖子数据”，这显然没有帮助。

Answer 1

// make an array of strings representing key value pairs
var feedback = ['var1=val1', 'var2=val2', 'var3=val3' ]; 
// to apply encodeURIComponent function for each cell
feedback = feedback.map(function (cell) 
{
    var res = cell.split('=');
    return res[0] + '=' + encodeURIComponent (res[1]);
}) ;

// join each pair with "&" seperating them

var dataString = Feedback.join('&');

 $.ajax({
     type    : "POST",
      url    : "feedback.php",
      data   : dataString,
      success: function(info) {
          $('#result').html(info);
      }
 });