实例
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<meta charset="UTF-8">
<title>ajax案例</title>
<style type="text/css">
.login{
width: 300px;
height: 300px;
background-color: azure;
box-shadow: 10px 10px 5px #ececec;
border-radius: 20%;
/*margin: 20px;*/
}
form{margin: 50px;}
#raset,#btn{margin:10px;border:none ;background-color: coral;width: 60px;height: 30px;border-radius:20% ;color: white;}
#raset:hover{background-color: cornflowerblue;cursor: pointer;font-size: 1.05em;}
#btn:hover{background-color: cornflowerblue;cursor: pointer;font-size: 1.05em;}
#btn{margin-left: 36px;}
</style>
</head>
<body>
<div class="login">
<h1>LOGIN</h1>
<form action="api/user.php" method="post">
<p>账户：<input type="text" name="name" id="name" value="" placeholder="请输入账户名" /></p>
<p>密码：<input type="password" name="pwd" id="pwd" value="" placeholder="请输入账户密码" /></p>
<p><input type="button" id="btn" value="登陆"/><input type="reset" name="raset" id="raset" value="重置" /></p>
</form>
<span id="tips"></span>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
//获取按钮添加点击事件
$('#btn').on('click',function(){
// 获取表单提交的数据
var data = {
//name和pwd都是表单name属性的值 val（）是表单传递的值
'name':$('#name').val(),
'pwd':$('#pwd').val()
}
//提交的url地址
var url = 'api/user.php?m=login'
//回调函数
var success = function(res){
if (res == 1) {
//获取到空文本区域输入文本
$('#tips').text('登陆成功，正在跳转中...')
//设置定时器跳转到指定页面
setTimeout(function(){
location.href = 'api/index.php'
},2000)
} else{
//获取到空文本区域输入文本
$('#tips').text('登陆失败，请重新输入...')
//设置定时器
setTimeout(function(){
//获取焦点
$('#name').focus()
//设置定时器获取文本内容并清空
setTimeout($('#tips').empty(),2000)
},2000)
}
}
//声明数据类型 默认为json 也最常用，可以不声明
var datatype = 'json'
//.post（url，data，success，datatype）四个参数分别为提交地址，提交的数据，回调函数，数据类型
$.post(url,data,success,datatype)
})
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
if ($_GET['m'] == 'login') {
if ($_POST['name'] == '123456@qq.cn' && $_POST['pwd'] == '123456'){
echo '1';
}
else {
echo '0';
}
}运行实例 »
点击 "运行实例" 按钮查看在线实例
