使用jQuery动态创建表单中的特殊字符

时间:2013-03-12 18:05:26

标签: javascript jquery

我正在动态创建一个表单并像下面的代码一样提交它,其中data是一个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();

现在我遇到了特殊字符问题。如果数据的任何属性包含任何特殊字符,则会将其转换为某些垃圾字符。关于如何解决这个问题的任何指示。

2 个答案:

答案 0 :(得分: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();

答案 1 :(得分:0)

  • 有什么特殊字符?
  • data来自哪里?
  • 什么是data的价值?

每天的课程:您可以if (typeof data != undefined)...

而不是if (data)...