服务返回数据成功后,如何使用Ajax进行页面弹窗提示和页面跳转

本文介绍了一个具体的示例,展示了如何利用jQuery发起Ajax请求,并在请求成功后展示一个带有回调功能的弹窗。该方法适用于需要在服务器响应后给予用户反馈的场景。

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

当服务器返回数据后不管是否成功都想要弹窗的效果
如图成功后:
在这里插入图片描述
js代码:
在这里插入图片描述
代码如下:

$.ajax({
    url:common_ops.buildUrl("http://127.0.0.1:5050/food/set"),
    data:data,
    dataType:"json",
    type:"POST",
success: function (res) {
        btn_target.removeClass("disabled");
        var callback = null;
        if (res.code == 200) {
            callback = function () {
                window.location.href = common_ops.buildUrl("/food/index");
            }
        }
        common_ops.alert(res.msg, callback);
    }
});

var common_ops = {
    alert:function( msg ,cb ){
        layer.alert( msg,{
            yes:function( index ){
                if( typeof cb == "function" ){
                    cb();
                }
                layer.close( index );
            }
        });
    },

    buildUrl:function (path,params) {
        var url=""+path;
        var _paramUrl="";
        if(params){
            _paramUrl=Object.keys(params).map(function (k) {
                return[encodeURIComponent(k),encodeURIComponent(params[k])].join("=");
            }).join("&");
            _paramUrl="?"+_paramUrl
        }
        return url+_paramUrl;
    },

};

$(document).ready( function() {
    common_ops.init();
});



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值