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：拦截表单提交和构建数据

回答

相关问题