简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 在线相册管理器与$.post()操作
Blogger Information
Blog 38
fans 0
comment 1
visits 30392
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
在线相册管理器与$.post()操作
1
Original
560 people have browsed it

实例

在线相册管理器

$(document).ready(function(){

	$('button').eq(0).click(function(){

		var img_url=$('#img_url').val()
		// 如何img_url没有传值
		if(img_url.length==0)
		{
			alert('请选择一张图片')
			$('#img_url').focus()
			return false
		}
		// 过滤radio，哪个有checked就传入哪个的值
		var img_type = $(':radio:checked').val()

		// 1.shadow 为 none 2.过滤：selected 值为1就传入属性，没有就传入none
		var shadow = 'none'
		if($(':selected').val()==1){
			shadow='3px 3px 3px #666'
		}
		// 图片属性
		var img = $('<img>')
			.prop('src',img_url)
			.width(150)
			.height(150)
			// css属性传入：img_type,shadow
			.css({
				'border-radius': img_type,
				'box-shadow':shadow
			})
			// 设置按钮，按钮的名字为前移.....
		var before = $('<button>').text('前移')
		var after = $('<button>').text('后移')
		var remove = $('<button>').text('删除')
		// 将之前设置的按钮插入li
		var li = $('<li>').append(img,before,after,remove)

		li.appendTo('ul')
		// 前移 ：将上一个图片作为插入点，在之前插入
		before.click(function() {
			$(this).parent().prev().before($(this).parent())
		});

		//后移: 将下一个图片做为插入点,在此之后插入当前图片
		after.click(function() {
			$(this).parent().next().after($(this).parent())
		});

		//删除
		remove.click(function() {
			$(this).parent().remove()
		});
	})
})

运行实例 »

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

$.post()操作

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3.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="font-size:1.2em;font-weight: bolder;color:red"></span></p>
			<!-- 取消原生提交动作 -->
			<!-- <p><button type="button">登录</button></p> -->
		</fieldset>
	</form>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
		/**
		 * $.post() ：处理ajax中的post请求
		 * 语句:$.post(url,data,success,dataType)
		 *
		 * success(dat,status,xhr)
		 * data:从服务器返回的数据
		 * status:当前请求的状态
		 * xhr:ajax对象
		 *
		 * dataType:html,json
		 */
		 $('button').eq(0).click(function(){
		 	var url = 'api/user.php?m=login'

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

		 	var success = function(res){
		 		if (res == '1') {
		 			$('#tip').text('登录成功,正在跳转中...') 
						setTimeout(function(){
							location.href = 'api/index.php'
						},2000)
		 		}else{
		 			$('#tip').text('邮箱或密码错误...') 
						$('#email').focus()
						setTimeout("tips.innerHTML = ''",2000)
		 		}
		 	}

		 	var dataType = 'json'

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

		 	return false
		 })

			
</script>

运行实例 »

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



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
  • 1
    2018-03-16 00:39:40
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！