jquery 和 html两者submit方式的区别

最新推荐文章于 2024-07-16 15:41:31 发布

jibing57

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量1.7k

点赞数

分类专栏： web 文章标签： jquery html user session object function

本文链接：https://blog.csdn.net/jibing57/article/details/8088614

版权

web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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" οnclick="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页面被重新载入了。

jibing57

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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']
复制链接

扫一扫