JQuery学习(5-AJAX1)

浏览数：49 / 时间：2015年06月09日

<?php
	
	/*
	* 保护AJAX请求的方式
	*/
	/*
	* 1. 防止表单的自动提交
	* 对表单的submit提交进行控制。设置一个全局变量submitError,在进行验证的方法体中对submitError进行修改；
	* 若出错，submitError++; 若错误更正submitError--；提交之前，若submitError=0,则进行提交
	*/
	
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<style>
	.pwd{
		width:200px;
		height:35px;
	}
</style> 
<title>无标题文档</title>
</head>

<body>
<form id="rg_user" >
	<div>
		<input type="password" size="12" id="rg_pwd" class="pwd" />
   		<div id="error_info" ></div>
    </div>
    <input type="submit" />
</form>

<script type="application/javascript">
	var submtError=0;
	/*
	* 提交前验证密码是否为空
	*/
	$('input[type="submit"]').click(
		function(){
			var pwd_length=$('#rg_pwd').val().length;
			if(pwd_length==0){
				$('#error_info').html("密码为空");
				submitError++;
			}
			if(submitError==0){
				$('rg_user').submit(
					function(e){
						e.preventDefault();
						//序列化表单数据
						var formData=$(this).serialize();
						$.post('php.php',formData,function(data){
								/*对服务器返回的数据进行操作*/
							});
					});
			}
		}
	)
	

</script>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JQuery学习(5-AJAX1)