相册管理
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>美女相册</title> <link rel="stylesheet" href="css/css.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/demo.js"></script> </head> <body> <div class="top"> <span> <label for="img_url">请输入图片地址</label> <input type="text" name="img_url" id="img_url" placeholder="/img/1.jpg"></span> <span> 请选择图片类型: <input type="radio" id="rect" name="border" value="0" checked><label for="rect">直角</label> <input type="radio" id="radius" name="border" value="10%"><label for="radius">圆角</label> <input type="radio" id="circle" name="border" value="50%"><label for="circle">圆型</label> </span> <span> 图片是否添加阴影: <select name="shadow"> <option value="0" selected>不添加</option> <option value="1">添加</option> </select> </span> <span><button class="add">添加图片</button</span> </div> <div class="box"> <div class="left"> <ul> </ul> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Ajax_POS
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Ajax_POS</title>
</head>
<body>
<form action="api/check.php" method="post">
<fieldset>
<legend>用户登陆</legend>
<p>
<label for="user">账号:</label>
<input type="text" name="user" id="user">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password" id="password" />
</p>
<p><button>登录</button>
<span id="tips" style="font-size:12px;color:#f00;"></span>
</p>
</fieldset>
</form>
</body>
<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 = {
"user": $('#user').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('或密码错误,请重新输入')
$('#user').focus()
setTimeout("$('#tips').empty()",2000)
}
}
//4.设置返回的数据格式为:json
var dataType = 'json'
//5.调用全局函数$.post()执行post请求
$.post(url, data, success, dataType)
return false
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
