動態構建包含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作爲數據字符串中的值。我注意到的第一件事是含「&」將是一個問題，所以我做了使用var2=<span>&nbsp;val2<span>一個簡單測試，HTML：

// 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> 

就讓我們來看看在檢查顯示：

我如何動態地創建一個字符串中的AJAX調用，包含HTML與data: dataString,使用？

我試過尋找這個，但我能找到的是「如何發送一個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 

變種dataString = feedback.join（ '&'）;

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