一分钟掌握异步操作(Ajax请求）

JavaScript/前端
383
0
0
2022-04-22
实用的Web前端插件推荐
上一篇
你需要掌握的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();
        }
    }
}
实用的Web前端插件推荐
上一篇
你需要掌握的Ajax方式提交表单的常见编码类型
下一篇