jQuery：攔截表單提交和構建數據

我有一個自定義值的表單，我想攔截它的提交併構建自己的數據傳遞給後端。jQuery：攔截表單提交和構建數據

我搜索，我可以intercep在做提交：

$("#search-form").submit(function(e){ 
    e.preventDefault(); 
    var form = this; 
    form.submit(); 
});

之前手動提交，我想建立傳遞給後端數據。例如，我想建立以下數據：

{ 
    search: { 
    someField1: "someValue1", 
    someField2: "someValue2", 
    someFields: [ 
     { 
     nestedField1: "value1", 
     }, 
     { 
     nestedField2: "value2" 
     } 
    ] 
    } 
}

需要明確的是，從形式的原始數據我想徹底清除，我不在乎什麼在它。

來源

2017-04-12 Federico Esteban

形式使用網址編碼對公佈。它看起來像你想發佈JSON。你能確認POST機構應該是什麼樣子嗎？ – dana

嘗試使用[FormData Object API]（https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects） – mhodges

因此，您想要用預先確定併發送的數據構建一個對象*代替用戶輸入的任何數據* – zer00ne

你可以攔截表單提交，取消它，只需使用ajax調用發送任何你喜歡的。

var data = { 
 
    search: { 
 
    someField1: "someValue1", 
 
    someField2: "someValue2", 
 
    someFields: [{ 
 
     nestedField1: "value1", 
 
     }, 
 
     { 
 
     nestedField2: "value2" 
 
     } 
 
    ] 
 
    } 
 
}; 
 
$('#test').submit(function(e) { 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    $.post(this.action, data); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="test" action="http://google.com" method="POST"> 
 
    <input type="text" /> 
 
    <input type="submit" /> 
 
</form>

來源

2017-04-12 15:35:12 bluehipy

'e.stopPropagation（）'和'return false'不是必需的。 – Mikey

@Mikey我想大多數情況下你是對的。但是，如果其中一個父母監聽了preventDefat，則不會停止父處理程序。另外如果有人正在檢查事件是否解決了處理程序返回問題。 'if（obj.fireEve t（eventName）！== false）' – bluehipy

jQuery：攔截表單提交和構建數據

回答

相關問題