博客列表 >$.post()操作——2018年4月9日

$.post()操作——2018年4月9日

Y的博客
Y的博客原创
2018年04月10日 17:43:44554浏览

代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><Document></Document></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.js"></script>
<script type="text/javascript">
$('button:first').click(function(){
	// ajax-post提交的地址
	var url = 'api/user.php?m=login'
	// 要提交到服务器的数据
	var data = {
		      "email":$('#email').val(),
		      "password":$('#password').val()
	}
    //执行成功的回调函数
		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)	
				}
			}

	//设置返回的数据格式为:json
		var dataType = 'json'

	//调用全局函数$.post()执行post请求
		$.post(url, data, success, dataType)

    //禁用默认提交
   return false

})
			
</script>

运行实例 »

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

效果图:

360截图16410115107124136.jpg

总结:

Ajax_POST还不够熟悉需要多多练习。

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