ajax_0">$.ajax()代码模板
jQuery实现ajax语法为：$.ajax({})，其中{}为对象，对象里面的key键是固定的，比如:
1、type: 表示请求方式，一般为post或get
2、url表示请求的地址
3、contentType表示发送信息至服务器时内容编码类型
4、data表示发送到服务器的数据
5、dataType表示预期服务器返回数据的类型如：text，json，xml等等类型
6、success表示请求成功后的回调函数
7、error自动判断 (xml 或 html)。请求失败时调用此函数，等等
例如
$.ajax({
//请求方式
type:"post",
//请求地址
url:"02ajax.php",
//发送信息至服务器时内容编码类型
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
//传递的数据
data:{username:username,password:password},
//预期服务器返回数据的类型如：text，json，xml等等
dataType:"json",
//请求成功
success:function(data){
console.log(data);
},
//请求失败，打印错误信息。
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
})
ajax_35">$.ajax()验证登录案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现ajax</title>
<style type="text/css">
.login{
margin: 100px;
}
#info{
width: 240px;
background-color:orange;
display: none;
overflow: hidden;
}
#btn{
width:100px;
font-weight: bold;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="login">
<table border="0" cellspacing="10px" cellpadding="">
<tr>
<td colspan="2">
<p id="info"></p>
</td>
</tr>
<tr>
<th>用户名：</th>
<td>
<input type="text" name="" id="username"/>
</td>
</tr>
<tr>
<th>密 码：</th>
<td>
<input type="text" name="" id="password" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="btn" value="登录"/>
</td>
</tr>
</table>
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var username=$("#username").val();
var password=$("#password").val();
$.ajax({
//请求方式
type:"post",
//请求地址
url:"02ajax.php",
//传递的数据
data:{username:username,password:password},
//预期服务器返回数据的类型如：text，json，xml等等
dataType:"json",
//请求成功
success:function(data){
var info=$("#info");
info.css("display","block");
//前面的dataType:"json",已经把json格式转化为js对象，所以可以直接调用对象来获取后端传过来的值
info.html("提示:"+data.tips);
//定时器过4秒隐藏提示信息
setTimeout(function(){
info.style.display="none";
},4000)
},
//请求失败，打印错误信息。
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
})
});
})
</script>
</body>
</html>
PHP后端响应代码
<?php
//判断请求方式
if(!empty($_POST)){
$uname=$_POST[username];
$pw=$_POST[password];
}
else{
$uname=$_GET[username];
$pw=$_GET[password];
}
$tips='';
if($uname=="123"&&$pw=="456"){
$tips="登录成功，正在跳转，请稍等...";
}
else{
$tips="用户名或密码错误";
}
//将数据封装成json格式传给$.ajax()的success方法
echo '{"username":"'.$uname.'","password":"'.$pw.'","tips":"'.$tips.'"}';
?>
实现效果
账号密码输入正确的时候
输入错误的时候
