jquery 和 html两者submit方式的区别
jquery的submit，当jquery validate的check failed时候，并不会将form的数据真正的submit。
而html的submit则，直接按照form的参数，将所有的数据进行submit。
code：
<?php
session_start();
if(isset($_SESSION['hit']))
{
$_SESSION['hit'] += 1;
echo "</br>hit + 1</br>";
}
else{
$_SESSION['hit'] = 0;
echo "</br>hit = 0</br>";
}
my_var_dump($_SESSION['hit'], 'hit');
my_var_dump($_POST, 'post');
function my_var_dump($dump_object, $object_name=null){
echo "</br> --------- $object_name --------- start </br>";
var_dump($dump_object);
echo "</br> --------- $object_name --------- end </br>";
}
?>
<html>
<head>
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>
<script src="scripts/jquery-impromptu.4.0.js" type="text/javascript"></script>
<script type="text/javascript">
function submitLogin(){
//alert("submit");
$('#loginFormId').submit();
//document.getElementById('loginFormId').submit();
}
$().ready(function(){
$('#loginFormId').validate({
rules: {
user_name:{
required: true
},
user_password:{
required: true
}
},
messages:{
user_name:{
required: "<?php echo "user name is required."?>"
},
user_password:{
required: "<?php echo "password is required."?>"
}
},
errorPlacement: function(error,element) {
error.insertAfter(element);
}
});
});
</script>
<style type="text/css">
.full_screen{
width:100%;
float:left;
}
</style>
</head>
<body>
<form id="loginFormId" name="loginForm" method="post" action="index.php">
<div class="full_screen">
<label> User name:</label>
<input id="user_name" type="text" value="" name="user_name">
</div>
<div class="full_screen">
<label> Password:</label>
<input id="user_password" type="password" value="" name="user_password">
</div>
<button type="button" onclick="submitLogin();">Submit</button>
</form>
</body>
</html>
原始界面载入如下：
在submitLogin函数中， 如果使用了 jquery方式的 $('#loginFormId').submit(); 来进行submit。
那么界面会显示如下：
可以看出，改变如下：
1. hit start 和 hit end中var_dump的内容没有变，post start和post end中var_dump的$_POST没有值
2. 在输入框User name, Password处输出 validate验证failed的错误信息。
可以看出，实际上页面没有重新导入index.php， 即submit操作没有完成
在submitLogin函数中， 如果使用了 html方式的document.getElementById('loginFormId').submit(); 来进行submit。
那么界面会显示如下：
可以看出，改变如下：
1. 输出了hit + 1的字样。
2. hit start 和 hit end中var_dump的内容改变了，
3. post start和post end中var_dump的$_POST有值输出。
可以看出，submit函数执行了，index.php页面被重新载入了。