Question

如何使用jQuery ajax将表单数据和其他值（即{a:'A',b:'B',c:'C'}）发布到服务器？

Html代码：

<form id="myForm">
    <p>firstname: <input name="firstname" type="text" value="John" /></p>
    <p>lastname: <input name="lastname" type="text" value="Doe" /></p>
</form>

Javascript代码：

var data={a:'A',b:'B',c:'C'};
$.post('index.php',data); //This seems to work 

var formData=$('#myForm').serializeArray();
$.post('index.php',formData);  //This seems to work 

//Wish to post {a:'A',b:'B',c:'C',firstname:'John',lastname:'Doe'} to the server
//Doesn't work
$.extend( data, formData );
console.log(data);
$.post('index.php',data);

Answer 1

尝试使用.each()来迭代input中的form元素，将this.name的{{1}}属性设置为input this.value在现有的input对象

data

var data = {
  a: "A",
  b: "B",
  c: "C"
};

$("form input").each(function() {
  data[this.name] = this.value
});

console.log(data);

// $.post("index.php", data);

Answer 2

guest271314可能有最好的答案，但希望得到这个答案的意见。

var data=$('#myForm').serializeArray();
$.each({a: "A", b: "B", c: "C"},function(n,v){data.push({ name : n, value : v });});
console.log(data);

Answer 3

serializeArray()将表单元素集作为名称和值的数组返回。数据将采用格式

[{ name: "name", value: "value" },.....]

所以你不能使用$.extend()所以你可以做这样的事情

var formData=$('#myForm').serialize();

$.each(data,function(i,v){
    formData+='&'+i+'='+v;
});
console.log(data);
$.post('index.php',formData);

或

var formData=$('#myForm').serializeArray();

$.each(data,function(i,v){
    formData.push({name:i,value:v});
});
console.log(data);
$.post('index.php',formData);

或定义与序列化数组相同的数组

var newData = [{name:"a", value:"A"}, {name:"b", value:"B"}];
formData=$.merge(formData,newData);
$.post('index.php',formData);

Answer 4

使用$ .merge并将对象转换为数组结构

var newData  = [];
$.each(data, function(k, v) {
   newData.push({name:k, value:v});
});
formData=$.merge(formData,newData);
console.log(data);
$.post('index.php',data);

将具有额外值的表单数据发布到服务器

4 个答案: