使用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)...