前言：
1、所有浏览器均支持“ jQuery 中 Ajax ”，出错的原因大部分是：
(1)有些jQuery中的内置函数，在某些浏览器中不支持==>在js代码中尽量少使用jQuery的内置函数，尽量放到PHP语言中去处理！
(2)异步请求的地址错误：地址不存在
2、jQuery“键盘事件”的注意事项：
一定要加上“event”事件，即：
$(‘#keywords’).keyup(function(event){
showKeywordsList(event);
})
三种常用异步方式：get、post、ajax
调用格式：
$.get(url,[data],[ callback ],[type]);
$.post(url, [data], [callback],[type]);
参数：
url(String)：待载入页面的URL地址
data(可选)：待发送 Key/value 参数。
callback(可选) Function：载入成功时回调函数。
type(String)(可选)：返回内容格式，xml, html, script, json , text, _default。
url地址的两种传递方式：
(1)第一种
<script>
var MyformUrl=’/PHPxueba15/App/Modules/Admin/Tpl/Public/’;
var AjaxUrl = ‘/PHPxueba15/Admin/Article’;
</script>
(2)第二种
<a href=”” url=”{:U(‘Member/Cart/addCart’,array(‘gid’=>$goods[‘gid’]))}” id=”addCart”></a>
var url = $(‘#addCart’).attr(‘url’);
第一种方式：get方式
$.get(“{:U(GROUP_NAME.’/List/keywordsList’)}”,
{keyword:keyword},
function(data){
$(‘# message _tips’).html(data.data[‘message’]);
$(‘#task_tips’).html(data.data[‘task’]);
$(‘#event_tips’).html(data.data[‘event’] );
$(‘#contract_tips’).html(data.data[‘url’] );
},’json’);
第二种方式：post方式
$.post(‘{:U(GROUP_NAME.’/List/keywordsList’)}’,
{ uid:uid,
passwd:passwd,
phone:phone
},
function(data){
$(‘#message_tips’).html(data.data[‘message’]);
$(‘#task_tips’).html(data.data[‘task’]);
$(‘#event_tips’).html(data.data[‘event’] );
$(‘#contract_tips’).html(data.data[‘url’] );
},
‘json’);
服务器端：
3.1版本以后，ajaxReturn方法可以更加灵活的进行ajax传值，能够完全定义传值的 数组 和类型，例如：
$data[‘message’] = ‘信息’;
$data[‘task’] = ‘info’;
$data[‘event’] = ‘事件’;
$data[‘url’] = $url;
$this->ajaxReturn($data,’JSON’);
第三种方式：ajax方式
$.ajax({
type:’GET’,
url:'{:U(GROUP_NAME.”/List/keywordsList/id/”)}’+department_id,
data:’id=’+department_id+’&num=’+goodsNum,
async: false ,
success:function(data){
options = ”;
$.each(data.data, function(k, v){
options += ‘<option value=”‘+v.position_id+'”>’+v.name+'</option>’;
});
$(“#role”).html(options);
},
dataType:’json’
});
服务器端：
public function getPositionList() {
if($_GET[id]){
$m_position = M(‘position’);
$where[‘department_id’] = $_GET[id];
$position_list = $m_position->where($where)->select();
$this->ajaxReturn($position_list, “获取成功！”, 1);
}else{
$this->ajaxReturn($position_list, “请选择部门！”, 0);
}
}
1、注：async(Boolean)
(默认: true) 默认设置下，所有请求均为 异步 请求;
如果需要发送 同步 请求,请将此选项设置为 false;
注意,同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行;
2、有关dataType的相关说明：
dataType的默认数据格式是：html(默认输出的是html标签形式的数据)
json格式的数据:输出的是一个“对象”，按对象的方式调用数据
3、Ajax使用技巧
(1)如果前端只是想知道，服务端是否成功响应了
前端：dataType不用设置
服务器端:echo 0;–>表示失败
echo 1;–>表示成功
(2)如果前端想获得服务器端返回的数据
前端：dataType设置为“json”
服务器端：
$this->ajaxReturn($position_list, “获取成功！”, 1);或者
$this->ajaxReturn($result,’JSON’);
exit(json_encode($result));
例1：
服务器端：
$data[‘message’] = ‘信息’;
$data[‘task’] = ‘info’;
$data[‘event’] = ‘事件’;
$data[‘url’] = $url;
$this->ajaxReturn($data,’JSON’);
前端：
$(‘#message_tips’).html(data.data[‘message’]);
例2：
服务器端：
$result = array(
‘ stat us’=>true,
‘num’=>$num
);
exit(json_encode($result));
前端：
oGoodsNum.val(result.num);
例3：
前端：dataType设置为“html”
$this->ajaxReturn(‘<div>测试</div>’, “获取成功！”, 1);
应用实例：
(1)用户/管理员登录验证实例
前端：
第一步：设置请求的URL地址
<script>
var MyformUrl=’/PHPxueba15/App/Modules/Admin/Tpl/Public/’;
var AjaxUrl = ‘/PHPxueba15/Admin/Article’;
</script>
第二步：异步请求
//1、异步验证用户名
$(“#aname”).blur(function(){
var aname = $(“#aname”);
$.post(AjaxUrl+”/checkAname”,{aname:aname.val(). trim ()},function(stat){
if(stat==1){
$(“#anameTip”).html(“<img src= “+MyformUrl+”Images/form1.png />”);
}else{
$(“#anameTip”).html(“用户名不存在！”);
}
})
})
//2、异步验证密码
$(“#apwd”).blur(function(){
var apwd = $(“#apwd”);
var aname=$(“#aname”);
$.post(AjaxUrl+”/checkApwd”,
{apwd:apwd.val().trim(),aname:aname.val().trim()},
function(stat){
if(stat==1){
$(“#apwdTip”).html(“<img src= “+MyformUrl+”Images/form1.png />”);
}else{
$(“#apwdTip”).html(“密码错误！”);
}
})
})
//3、异步验证验证码
$(“#verify”).blur(function(){
var verify = $(“#verify”);
$.post(AjaxUrl+”/checkVerify”,{verify:verify.val().trim()},function(stat){
if(stat==1){
$(“#verifyTip”).html(“<img src= “+MyformUrl+”Images/form1.png />”);
}else{
$(“#verifyTip”).html(“验证码错误！”);
}
})
})
服务器端：
/**
* 异步验证管理员帐号
*/
Public function checkAname () {
if (!$this->isAjax()) halt(‘页面不存在’);
$aname = $this->_post(‘aname’);
$where = array(‘aname’ => $aname);
if (M(‘admin’)->where($where)->find()) {
echo 1;
} else {
echo 0;
}
}
/**
* 异步验证密码
*/
Public function checkApwd () {
if (!$this->isAjax()) halt(‘页面不存在’);
$aname = $this->_post(‘aname’);
$apwd = $this->_post(‘apwd’, ‘md5’);
$where = array(‘aname’ => $aname);
$password = M(‘admin’)->where($where)->getField(‘apwd’);
if ($password && $password == $apwd) {
echo 1;
} else {
echo 0;
}
}
/**
* 异步验证验证码
*/
Public function checkVerify () {
if (!$this->isAjax()) halt(‘页面不存在’);
if ($_SESSION[‘verify’] == $this->_post(‘verify’, ‘strtolower’)) {
echo 1;
} else {
echo 0;
}
}
(2)异步请求弹窗
前端：
弹窗模板：
<div style=”display: none;” id=”treemodelprompt”>
<span class=”img”></span>
<span class=”text”></span>
</div>
失去焦点后请求：
$(“.treemodelupdatesortclick”).live(“blur”, function() {
var valueid = $(this).next().text();//主键值
var sortvalue = $(this).val();//排序值
var id=$(this).next().next().text();//主键字段名
var sort=$(this).next().next().next().text();//排序字段名
var data = id+”=”+valueid+”&”+sort+”=”+sortvalue;
var type=’sort’;
treemodelajax(data,type);
});
Ajax请求方法：
/* Ajax方法 */
function treemodelajax(data,type) {
$.ajax({
url:url+’/Classification/’+type,
type:”post”,
data:data,
dataType:”json”,
success:function(data) {
if(data == 1) {
//alert(“操作成功！”);
$(“#treemodelprompt .img”).html(“✔”);
$(“#treemodelprompt .text”).html(“操作成功！”);
$(“#treemodelprompt .img”).css(“color”, “#5EBB29”);
$(“#treemodelprompt .text”).css(“color”, “#5EBB29”);
$(“#treemodelprompt”).slideToggle(500);
treemodelsetintervalset();
} else {
//alert(“操作失败！”);
$(“#treemodelprompt .img”).html(“✘”);
$(“#treemodelprompt .text”).html(“操作失败！”);
$(“#treemodelprompt .img”).css(“color”, “#F00”);
$(“#treemodelprompt .text”).css(“color”, “#F00”);
$(“#treemodelprompt”).slideToggle(500);
treemodelsetintervalset();
}
}
});
}
倒计时关窗：
/* 倒计时方法 */
var i = 5;
function treemodelsetintervalset() {
i = 5;
setInterval(“treemodelsetinterval()”, 1000);
}
function treemodelsetinterval() { //倒计时关闭跳转窗口
if(i == 1) {
$(document).ready(function() {
$(“#treemodelprompt”).slideUp(500);
});
} else {
i–;
}
}
服务器端：
/**
* ajax数据排序操作
*/
public function sort(){
//学期排序
if(false == empty($_POST[‘srid’])) {
$where=array(‘srid’=>$_POST[‘srid’]);
$Statu = M(‘semester’)->where($where)->setField(“srsort”, $_POST[‘srsort’]);
if($Statu) {
echo 1;exit();
} else {
echo 0;exit();
}
}
//班级排序
if(false == empty($_POST[‘cid’])) {
$where=array(‘cid’=>$_POST[‘cid’]);
$Statu = M(‘class’)->where($where)->setField(“csort”, $_POST[‘csort’]);
if($Statu) {
echo 1;exit();
} else {
echo 0;exit();
}
}
}
