php jQuery POST 表单数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5772839/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery POST form data
提问by LabRaTT
When I click submit I'd like all form data to be POSTed to process.php. Then on process.php I want to echo out the POST data and finally replace everything in results div to what was done in process.php.
当我单击提交时，我希望将所有表单数据发布到 process.php。然后在 process.php 上，我想回显 POST 数据，最后将结果 div 中的所有内容替换为 process.php 中所做的内容。
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit( function () {
$.ajax({
type: "POST",
dataType: "html",
cache: false,
url: "process.php",
success: function(data){
$("#results").html(data);
}
});
return false;
});
//$("#myform").submit( function () {
//$('#results').html("yay");
//}
// });
//} );
});
</script>
<form name="myform" id="myform" action="" method="POST">
<!-- The Name form field -->
<label for="name" id="name_label">zoom</label>
<input type="text" name="zoom" id="zoom" size="30" value=""/>
<br>
</select>
<!-- The Submit button -->
<input type="submit" name="submit" value="Submit">
</form>
<!-- FORM END ---------------------------------------- -->
<!-- RESULTS START ---------------------------------------- -->
<div id="results">nooooooo<?PHP $_SESSION[''] ?><div>
<!-- <input type="image" name="mapcoords" border="0" src="mapgen.php"> ---- -->
<!-- RESULTS END ---------------------------------------- -->
回答by keepitterron
You can call $.postpassing form data serialized. like this:
您可以调用$.post传递的表单数据序列化。像这样：
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit( function () {
$.post(
'process.php',
$(this).serialize(),
function(data){
$("#results").html(data)
}
);
return false;
});
});
</script>
回答by DJafari
$("#myform").submit( function () {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "process.php",
success: function(data){
$("#results").html(data);
}
});
return false;
});
Test it
测试一下
回答by Rohan Bagchi
There is but another way to do it all. This example uses the jQuery validateplugin. Here, all the form fields are validated automatically. Download jqueryfrom here :
只有另一种方法可以做到这一切。此示例使用 jQuery验证插件。在这里，所有表单字段都会自动验证。从这里下载jquery：
https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js
Download validation pluginfrom here :
从这里下载验证插件：
http://jquery.bassistance.de/validate/jquery-validation-1.10.0.zip
http://jquery.bassistance.de/validate/jquery-validation-1.10.0.zip
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.validate.1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#customForm").validate({
debug: false,
rules: {
name: {required:true,minlength:8,maxlength:8},
email: {required:true,email:true},
},
submitHandler: function(form) {
// do other stuff for a valid form
$('#rsltx').html('<img src="WhiteLoading.gif"> Processing... please wait');
$.post('post.php', $("#customForm").serialize(), function(data) {
$('#rsltx').html(data);
});
}
});
});
</script>
<form method="post" id="customForm" action="">
<div>
<label for="name">Name</label>
<input id="name" name="name" type="text" autocomplete="off" required/>
</div>
<div>
<label for="email">E-mail</label>
<input id="email" name="email" type="email" autocomplete="off" required/>
</div>
<div>
<input id="send" name="send" type="submit" value="Send" />
</div>
</form>
