Blogger Information
Blog 87
fans 0
comment 0
visits 59728
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第十七节课作业:5.ajax的jquery实现$(.post())
黄忠倚的博客
Original
708 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>5.ajax的jquery实现$(.post())</title>
</head>
<body>
	<form action="api/check.php" method="post">
	<fieldset>
	<legend>用户登录</legend>
		<p>
			<label for="email">邮箱:</label>
			<input type="text" name="email" id="email">
		</p>
		<p>
			<label for="password">密码:</label>
			<input type="password" name="password" id="password">
		</p>
		<p>
			<button>登录</button>
			<span id="tips" style="font-size:1.2em;font-weight:bolder;color:red"></span>
		</p>
	</fieldset>
	</form>
</body>
</html>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	/**
	 * $.post()全局函数,处理ajax中的post请求
	 * 基本语法:$.post(url,data,success,dataType)
	 * url:请求的地址:api/user.php?m=login
	 * data:需要发送到服务器的数据,以JS对象方式进行包装
	 *
	 * success(data,status,xhr):执行成功的回调函数
	 * 回调函数:data:从服务器返回的数据
	 * 			 status:当前请求的状态
	 * 			 xhr:ajax对象
	 * 我们只关心data
	 * dataType:从服务器返回的数据格式
	 * xml,html,script,json,text,_defaut			 
	 */
	
	 $('button:first').click(function(){
	 	/**
	 	//1.提交地址
	 	var url = 'api/user.php?m=login'

	 	2.要提交的数据
	 	var data = {
	 		'email':$('#email').val(),  //注意:此处的 ,# 号定界符不能少,否则出错!
	 		'password':$('#password').val()
	 	}
	 	

	 	//3.设置成功回调函数
	 	var success = function(data){
	 		if (res == '1') {
	 			$('#tips').text('登录成功,正在跳转中。。。')
	 			setTimeout(function(){
	 				location.href = 'api/index.php'
 			}.2000)
 			} else {
	 			$('#tips').text('邮箱或密码错误,请重新输入。。。')
			 	// $('#tips').focus()
			 	setTimeout("tips.innerHTML = ''",2000)
	 	}
	 }
	 	//4.设置返回的数据格式:
	 	var dataType = 'json'

	 	//5.调用全局函数$.post()
	 	$.post(url,data,success,dataType)

	 	*/
	 	
	 	//简化操作:
	 	$.post(
	 		'api/user.php?m=login',
	 		{
	 			'email':$('#email').val(),
	 			'password':$('#password').val()
	 		},
	 			function(res) {
	 				if (res == '1') {
	 					$('#tips').text('登录成功,正在跳转中。。。')
	 					setTimeout(function() {
	 						location.href = 'api/index.php'
	 					},2000)
	 				} else {
	 					$('#tips').text('邮箱或密码错误,请重新输入。。。')
	 					$('#email').focus()
	 					setTimeout("tips.innerHTML =''",2000)
	 				}
	 			}
	 		
	 		)

	 	return false	
	 })

</script>

运行实例 »

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

实例

<?php
if ($_GET['m'] == 'login') {
	if ($_POST['email'] == 'admin@php.cn' && $_POST['password'] == '123456') {
		echo "1";
	} else {
		echo "0";
	}
}

运行实例 »

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

实例

<?php
echo "<h1>登录成功</h1>";

运行实例 »

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


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