ajax 加载页面

本文介绍了如何利用Ajax技术实现在网页中不刷新页面的情况下,动态加载和更新数据。通过Ajax,可以提高用户体验,实现流畅的数据交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

var CURD = new Object();
CURD = {
    del:function(path,id){

    //删除操作
        if(confirm('确定要删除!')){
            $.ajax({
                type:'post',
                url:'/user/detele/'+path,
                id:id,
                cache:false,
                data:{'id':id},
                beforeSend:function(){
                    $('#mask').show()
                },
                success:function(d){
                    if(d.success){
                        CURD.ms('删除成功')
                        CURD.ajax_html(path)
                    }else{
                        alert("操作失败,请稍后重试!!!");
                    }
                },
                error:function(){
                 alert("操作失败,请稍后重试!!!");
                },
                complete:function(){
                    $('#mask').hide()
                }

            });
        }
    },
    ms:function(text){
    //操作后的提示
        $('.alert').text(text).fadeIn();
             setTimeout(function(){
                $('.alert').fadeOut()
                },2000);
              //加载更新数据
                //ajax()
    },
    ajax_html:function(path){
    //操作后异步刷新表格
        $.ajax({
            type:'get',
            url:'/user/ajax/'+path,
            cache:false,
            success:function(d){
                $('#ajax').html(d)
            },error:function(){
                alert('数据加载失败,请刷新后再操作')
            }
        })
    },
    all:function(path){
    //批量操作
        var id =[]
        if(confirm('确定要删除!')){
            $('input[name="item"]').each(function(){
                if($(this).attr('checked') == 'checked'){
                    var id = $(this).val()
                    $.ajax({
                        type:'post',
                        url:'/user/detele/'+path,
                        id:id,
                        cache:false,
                        data:{'id':id},
                        success:function(d){
                            CURD.ms('删除成功')
                            CURD.ajax_html(path)
                        },
                        error:function(){
                         alert("操作失败,请稍后重试!!!");
                     }
                    });
                }
            });
        }

    }

}

打开页面加载数据。

<script type="text/javascript">
    CURD.ajax_html('message')
</script>

加载时用图片透明遮罩

/*加载图片*/
#mask{
    position: fixed;
    _position: absolute;
    _top: expression(documentElement.scrollTop + documentElement.clientHeight-offsetHeight);
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    display:none;
}
.loader{
    position: fixed;
    _position: absolute;
    _top: expression(documentElement.scrollTop + documentElement.clientHeight-offsetHeight);
    top:200px;
    left:50%;
    z-index:999;
}
.loader img{
    filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
}

#ajax请求地址
@user.route('/ajax/<path>')
@auth.require(401)
def ajax(path):
    if path == 'message':
        p = int(request.args.get('p',1))
        data = M.Message.search(uid=g.user.mongo_id,page=p,nums=10)
    return render_template('user/ajax.html',path=path,data=data)

#删除操作
@user.route('/detele/<path>', methods = ("GET", "POST"))
@auth.require(401)
def detele(path=None):
    success = False
    if path == 'message':
        id = request.form.get('id')
        M.Message.get_or_404(id=ObjectId(id)).remove()
        success = True
    return jsonify({'success':success})


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值