灵犀科技 网站建设每日一则小新闻
$.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()验证登录案例代码
<!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.'"}';
?>
实现效果
账号密码输入正确的时候
输入错误的时候
