向服务器发布带有额外值的表单数据

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

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 2

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

Answer 3

尝试利用.each()内form迭代input元素，在现有data对象设置的inputthis.name财产的inputthis.value

var data = { 
 
    a: "A", 
 
    b: "B", 
 
    c: "C" 
 
}; 
 

 
$("form input").each(function() { 
 
    data[this.name] = this.value 
 
}); 
 

 
console.log(data); 
 

 
// $.post("index.php", data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id="myForm"> 
 
    <p>firstname: 
 
    <input name="firstname" type="text" value="John" /> 
 
    </p> 
 
    <p>lastname: 
 
    <input name="lastname" type="text" value="Doe" /> 
 
    </p> 
 
</form>

Answer 4

guest271314可能有最佳答案，但希望对此答案发表意见。

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