一分钟掌握异步操作(Ajax请求) ajax异步请求提交的两种形式

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(

'status'=>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();

}

}

}