向服務器發佈帶有額外值的表單數據

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);