Blogger Information
Blog 49
fans 0
comment 1
visits 46597
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实战:ajax表单传值验证---2018年04月10日
失去过去的博客
Original
704 people have browsed it

实例

<!DOCTYPE html>
<html>
	<head>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<meta charset="UTF-8">
		<title>ajax案例</title>
		<style type="text/css">
			.login{
				width: 300px;
				height: 300px;
				background-color: azure;
				box-shadow: 10px 10px 5px #ececec;
				border-radius: 20%;				
				/*margin: 20px;*/
			}
			form{margin: 50px;}
			
			#raset,#btn{margin:10px;border:none ;background-color: coral;width: 60px;height: 30px;border-radius:20% ;color: white;}
			#raset:hover{background-color: cornflowerblue;cursor: pointer;font-size: 1.05em;}
			#btn:hover{background-color: cornflowerblue;cursor: pointer;font-size: 1.05em;}
			#btn{margin-left: 36px;}
		</style>
	</head>
	<body>
		<div class="login">
			<h1>LOGIN</h1>
			<form action="api/user.php" method="post">
				<p>账户:<input type="text" name="name" id="name" value="" placeholder="请输入账户名" /></p>
				<p>密码:<input type="password" name="pwd" id="pwd" value="" placeholder="请输入账户密码" /></p>			
				<p><input type="button" id="btn" value="登陆"/><input type="reset" name="raset" id="raset" value="重置" /></p>
			</form>
			<span id="tips"></span>
        	</div>
	</body>
</html>
<script type="text/javascript">
	$(function(){
		
		
		//获取按钮添加点击事件
		$('#btn').on('click',function(){
			// 获取表单提交的数据
			var data = {
					//name和pwd都是表单name属性的值 val()是表单传递的值
					'name':$('#name').val(),
					'pwd':$('#pwd').val()
				}
					//提交的url地址
			
			var url =  'api/user.php?m=login'
					//回调函数 
			var success = function(res){
					if (res == 1) {
							//获取到空文本区域输入文本
							$('#tips').text('登陆成功,正在跳转中...')
							//设置定时器跳转到指定页面
							setTimeout(function(){
								
								location.href = 'api/index.php'
								
							},2000)
							
					} else{
						//获取到空文本区域输入文本
						$('#tips').text('登陆失败,请重新输入...')
							//设置定时器
							setTimeout(function(){
								//获取焦点
								$('#name').focus()
								//设置定时器获取文本内容并清空
								setTimeout($('#tips').empty(),2000)
								
							},2000)
					}
					
					
				}
			//声明数据类型 默认为json 也最常用,可以不声明
			var  datatype = 'json'
			//.post(url,data,success,datatype)四个参数分别为提交地址,提交的数据,回调函数,数据类型
			$.post(url,data,success,datatype)
			
		})
		
		
		
	})
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<?php
echo '<h1>登陆成功</h1>';
?>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<?php 
if ($_GET['m'] == 'login') {
	if ($_POST['name'] == '123456@qq.cn' && $_POST['pwd'] == '123456'){
			echo '1';
		}
	else {
		echo '0';
	}
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


QQ截图20180410152946.jpg

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post