博客列表 >0409作业-$.post()方法

0409作业-$.post()方法

麦小糖的博客
麦小糖的博客原创
2018年04月14日 16:07:15847浏览

$.post()方法

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax入门</title>
</head>
<body>
	<form action="api/user.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.1em;color: red;font-weight: bolder;"></span>
			</p>
		</fieldset>
	</form>
</body>
</html>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	/**
	 * $.post():jquery处理ajax中的post请求
	 * 基本语法:$.post(url, data, success, dataType)
	 * 参数说明: 
	 * 		url: 请求的地址
	 * 		data: 需要发送到服务器端的数据
	 * 		
	 * 		success(data,status,xhr): 执行成功的回调函数,
	 * 		回调参数: 1.data: 从服务器端返回的数据
	 * 				 2.status: 当前请求的状态
	 * 				 3.xhr: ajax对象
	 * 		通常我们只关心返回的数据:data
	 *
	 * 		dataType: 从服务器返回数据的格式
	 * 		xml, html, script, json, text, _default
	 * 		通常是'json',可省略,由系统自动判断
	 * 	 	
	 */
	$('button:first').click(function(){
		var url = 'api/user.php?m=login'

		var data = {
			"email":$('#email').val(),
			"password":$('#password').val()
		}

		// 服务器返回的数据为res
		var success = function(res){
			if(res == '1'){
				$('#tips').text("登录成功,正在跳转……")
				setTimeout(function(){
					location.href = 'api/index.php'
				},2000)
			}else{
				$('#tips').text("邮箱或密码错误,请重新输入!")
				$('#email').focus()
				setTimeout("$('#tips').empty()",2000)
			}
		}

		var dataType = 'json'

		$.post(url,data,success,dataType)

		//禁用默认提交
		return false
	})
</script>

运行实例 »

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

实例

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

运行实例 »

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

实例

<?php
echo "<h2 style="color:red">登录成功啦</h2>";

运行实例 »

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

0409作业.png

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议