使用jQuery動態創建表單中的特殊字符

Question

我正在創建一個動態的表單，並像下面的代碼那樣提交它，其中數據是一個js對象。

var inputStr = ''; 
if (typeof data != undefined) { 
    for (var prop in data) { 
    if (data.hasOwnProperty(prop)) { 
     inputStr += "<input type='text' name='" + prop + "' value='" + data[prop] + "' />"; 
    } 
    } 
} 
var form = $('<form style="display:none;" action="/someurl.do" method="post">' + inputStr + '</form>'); 
$('body').append(form); 
$(form).attr('target', '_blank'); 
$(form).submit(); 

現在我遇到了特殊字符的問題。如果數據的任何屬性包含任何特殊字符，則它將轉換爲某些垃圾字符。任何關於如何解決這個問題的指針。

Answer 1

的問題是，你是通過連接字符串手動創建的元素。您可以通過將封閉標籤傳遞給jQuery對象來動態創建元素。例如，如果你想創建一個新的<input/>元素，簡單的做：

var input = $('<input/>'); 

如果需要指定屬性/該元素的性質，在傳遞一個對象作爲像這樣的第二個參數：

var input = $('<input/>',{ 
    name : 'theName', 
    value : 'theValue' 
}); 

以這種方式傳遞的值將被正確轉義（特殊字符將被解析）。你也可以做這樣的：

var input = $('<input/>',{ 
    name : 'theName' 
}).val('theValue'); 

因此，我重構代碼：

http://jsfiddle.net/vdxnn/1/

//Sample data 
var data = { 
    field1 : 'Q@#*&^$@$)@^#$', 
    field2 : 'value2', 
}; 

//Create the form 
var form = $('<form/>',{ 
    target: 'blank', 
    action: '/someurl.do', 
    method: 'post' 
    //NOTE: `style : 'display:none'` isn't necessary; 
    //  just use the hide() method 
}); 

//Loop through data object 
if (typeof data !== 'undefined') { 
    for (var prop in data) { 
     //Create a new <input/> element 
     var input = $('<input/>',{ 
      type:'text', 
      name: prop, 
      value: data[prop] 
     }); 
     //Append it to the form 
     form.append(input); 
    } 
} 

//Hide the form 
form.hide() 

//Append the form to the body 
$('body').append(form); 

//Submit the form 
$(form).submit(); 

Answer 2

• 什麼是特殊字符？
• data從哪裏來？
• 什麼是data的價值？

課的一天：與其if (typeof data != undefined)...你可以做if (data)...