如何在不刷新页面的情况下自动提交此表单？
[英]How do I automatically submit this form without refreshing the page?
问题描述
这都在一个php文件中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JQuery Form Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script><!--need at least one instance of jquery-->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script><!--ajax to use with jquery-->
<script type="text/javascript">
$(document).ready(function(){//when the document has loaded
$("#myform").validate({//Q: what is validate?, myform gets validated
debug: false,
rules: {
name: "required",//name and email are the only things passed
email: {
required: true,
email: true//I guess this defines the input as an email
}
},
messages: {//at what point is this message displayed?
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
},
submitHandler: function(form) {//submit the form
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {//Q:what is serialization? myform gets serialized and assigned an action
$('#results').html(data);//what is this?
});
}
});
});
window.onload=function( )
{
}
</script>
<style>
label.error { width: 250px; display: inline; color: red;}
</style>
</head>
<body>
<form name="myform" id="myform" action="" method="POST">
<!-- The Name form field -->
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="Charlie"/>
<br>
<!-- The Email form field -->
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value="obesemuleaccount@yahoo.com"/>
<br>
<!-- The Submit button -->
<input type="submit" name="submit" value="Submit">
</form>
<!-- We will output the results from process.php here -->
<div id="results"><div>
</body>
</html>
<!--ok, so I want to first try some stuff out to get a feel for how the form works-->
<!--upload the form to the site somewhere-->
<!--access and play around with it-->
<!--then figure out how to submit to multiple php forms-->
所以我正在使用Jquery和Ajax，并且我需要自动提交表单。
我已经尝试使用诸如document.myform.submit之类的东西，但这似乎不起作用。 当我不使用ajax时，它可以工作，但是这会导致页面刷新到php文件的目标。
我想我只是缺少一些语法。 我进行了搜索，发现了一些像这样的线程： Ajax自动表单提交
但是我更像是一个业余设计师，所以我不太了解他们在说什么。 我不会把我的代码固定在其他人身上的任务，但是我很确定更改是次要的，并且我已经花了一段时间尝试解决这个问题。 非常感谢任何有帮助的人！ 请按照您的指示进行详细说明，实际上最好是直接在代码本身中提供此修复程序。
编辑：请不要嘲笑我的评论，我现在更好地理解了代码（经过大量的搜索），这是几个小时前的修订。
双重编辑：这是一个名为process.php的示例php脚本，您需要对其进行编辑以查看自动提交是否有效。 如上所述，您可以使用MySQL数据库执行此操作。
print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
4 个解决方案
解决方案1
1 2011-08-01 10:56:30
您可以使用jQuery $（'form'）。submit（）方法检查何时提交表单，然后在完成所有AJAX工作后return false;否则，您将return false; 并阻止默认提交。
解决方案2
1 已采纳 2011-08-01 10:59:08
我认为只要付出最小的努力就可以
<script>
$(document).ready(function(){
submit_form();
});
function submit_form () {
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
</script>
问：什么是验证？，myform得到验证
答：使用validate方法，可以确保在提交表单之前，字段中的数据有效。
问：此消息在什么时候显示？
答：验证未通过时。 例如，您将名称指定为“ required”，并且电子邮件必须是前面几行的“ email”。
问：什么是序列化？ myform被序列化并分配一个动作
答：Serialize读取表单中所有字段的值，并构造适合GET和POST的查询字符串。 在您的情况下，序列化后，POST数据将为name=Charlie&email=obesemuleaccount@yahoo.com”
问：这是什么？
答：“数据”作为参数传递给回调函数。 在这种情况下，process.php的输出将被写入＃（'＃results'）的innerHTML中
解决方案3
1 2011-08-01 11:01:16
这个jquery插件应该可以使用http://malsup.com/jquery/form/
很简单
$('#myform').submit(function()
{
$('#myform').ajaxForm();
return false;
});
并且您的表单将在不刷新页面的情况下提交。
解决方案4
1 2011-08-01 13:05:39
您的脚本运行正常。 我测试了它，并且效果很好。 要自动提交表单，您必须在windo.onload函数中添加以下行：
$("#myform").submit();
它将在页面加载时自动提交您的表单。
要测试您的页面并查看表单提交结果，我建议您首先将页面提交到一个简单的html文件（包含一些单词...），然后再获取php文件。
然后根据要提交页面的html文件的名称将sumbmitHandler更改为：（在我的情况下，文本文件为target.html，仅包含单词Hi）
submitHandler: function(form) {//submit the form
// do other stuff for a valid form
$.post('target.html', $("#myform").serialize(), function(data) {//Q:what is serialization? myform gets serialized and assigned an action
alert(data);
$('#results').html(data);//what is this?
});
}
在页面加载时，您将看到并警告html页面的内容，并且div结果也将填充此内容。
希望对您有所帮助！
请评价。
如何提交表单而不刷新当前页面？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.