我想使用jQuery提交表单。有人能提供代码、演示或示例链接吗?
submit()
方法。对于 AJAX,有许多不同的可能性,但您可能想使用 ajax()
或 post()
方法之一。请注意,post()
实际上只是一种方便的方法,用于以简化且受限制的界面调用 ajax()
方法。
一个至关重要的资源,我每天都在使用的资源,您应该收藏它,那就是How jQuery Works。它有关于使用 jQuery 的教程,左侧导航可以访问所有文档。
示例:
正常
$('form#myForm').submit();
AJAX
$('input#submitButton').click( function() {
$.post( 'some-url', $('form#myForm').serialize(), function(data) {
// ... do something with response from server
},
'json' // I expect a JSON response
);
});
$('input#submitButton').click( function() {
$.ajax({
url: 'some-url',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
// ... do something with the data...
}
});
});
ajax()
和post()
方法是等效的。您可以添加其他参数到ajax()
请求中以处理错误等。$("#formId").submit()
来提交表单。<input type='button' value='Submit form' onClick='submitDetailsForm()' />
<script language="javascript" type="text/javascript">
function submitDetailsForm() {
$("#formId").submit();
}
</script>
您可以在Jquery网站上获取更多信息。
当您有一个现有表单需要与jQuery - ajax/post一起使用时,您可以:
执行您自己的操作
$(function() {
//hang on event of form with id=myform
$("#myform").submit(function(e) {
//prevent Default functionality
e.preventDefault();
//get the action-url of the form
var actionurl = e.currentTarget.action;
//do your own request an handle the results
$.ajax({
url: actionurl,
type: 'post',
dataType: 'application/json',
data: $("#myform").serialize(),
success: function(data) {
... do something with the data...
}
});
});
});
请注意,在上面的示例中,为了使serialize()
函数正常工作,所有表单元素都需要定义其name
属性。<form id="myform" method="post" action="http://example.com/do_recieve_request">
<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>
@PtF - 在这个示例中,数据是使用POST提交的,这意味着您可以通过
$_POST['dataproperty1']
其中dataproperty1是您JSON中的“变量名称”。
如果您使用CodeIgniter,这里是示例语法:
$pdata = $this->input->post();
$prop1 = $pdata['prop1'];
$prop1 = $pdata['prop2'];
$("#form-id").submit()
但是,你其实不需要使用jQuery来执行这个任务 - 只需使用普通的JavaScript:
document.getElementById("form-id").submit()
从手册中获取:jQuery文档
$("form:first").submit();
有关信息
如果有人使用
$('#formId').submit();
不要做这样的事情
<button name = "submit">
花费了很多时间才发现我的submit()不会像这样起作用。
<button id="submit">
无法提交。 - Babak Asadzadeh使用jQuery来提交你的表单。 这里是链接http://api.jquery.com/submit/
<form id="form" method="post" action="#">
<input type="text" id="input">
<input type="button" id="button" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function () {
$( "#button" ).click(function() {
$( "#form" ).submit();
});
});
</script>
button
添加到您的按钮中,以确保表单不会提交(因为并非所有浏览器都以相同的方式处理没有类型的按钮)。 - Mikey这将使用预加载程序发送表单:
var a=$('#yourform').serialize();
$.ajax({
type:'post',
url:'receiver url',
data:a,
beforeSend:function(){
launchpreloader();
},
complete:function(){
stopPreloader();
},
success:function(result){
alert(result);
}
});
我有一些诀窍可以使用随机方法重组表单数据的提交方式 http://www.jackart4.com/article.html
jQuery('#<form-id>').submit( function(e){
e.preventDefault();
// maybe some validation in here
if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});
won't 的作用是尝试为此表单的提交事件安装一个新的事件监听器(但失败了)。因此,您必须访问HTML元素本身(从jQquery中解除包装)并直接调用submit()方法:
jQuery('#<form-id>').submit( function(e){
e.preventDefault();
// note the [0] array access:
if ( <form-is-valid> ) jQuery('#<form-id>')[0].submit();
});