简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 0409在线相册s.post()
Blogger Information
Blog 18
fans 0
comment 0
visits 11651
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0409在线相册s.post()
专业交作业
Original
728 people have browsed it
实例
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ajax</title>
</head>
<body>
	<form action="api/check.php" method="post">
		<fieldset>
			<legend>用户登陆</legend>
			<p>
				<label for="email">邮箱：</label>
				<input type="email" 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="color:red; font-size: 1.2em;font-weight: bolder;"></span>
			</p>

		</fieldset>
	
	</form>

</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$('button:first').click(function(){
		//1.ajax-post提交地址
		var url ='api/user.php?m=login'
		//2.提交服务器数据
		var data={
			"email":$('#email').val(),
			"password":$('#password').val()
		}
		//3.设置执行成功的回调函数
		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)
			}	
		}
		//4.设置返回数据格式json
		var dataType='json'
		//5.调用全局函数$.post()执行post请求
		$.post(url,data,success,dataType)

		return false
	})
	
</script>
运行实例 »
点击 "运行实例" 按钮查看在线实例实例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>在线相册</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
	<div class="wrap">
	   <div class="header">
		<h2>在线相册</h2>
		<p>
			<label for="img_url">输入图片地址： <input type="text" name="img_url" id="img_url" value="images/boy.jpg"></label>
		</p>
		<p>
			产品类型：<input type="radio" name="type" value="0" checked="">矩形
			<input type="radio" name="type" value="20%">圆角
			<input type="radio" name="type" value="50%">圆形
		</p>
		<p>
			阴影：<select name="img_shadow" id="img_shadow">
				<option value="1" selected="">添加阴影</option>
				<option value="0">不添加阴影</option>
			</select>
		</p>
	     <p><button class="add">添加</button></p>
	  </div>
	
	  <div class="main"><ul></ul></div>
    </div>    
	
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例


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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！