php提交表单时弹出请稍等，或者是一直转的图片，处理成功之后跳转的js代码

最新推荐文章于 2022-05-19 11:25:21 发布

廖圣平

最新推荐文章于 2022-05-19 11:25:21 发布

阅读量1.7k

点赞数

分类专栏： php javascript

本文链接：https://blog.csdn.net/qq_22823581/article/details/78217269

版权

php 同时被 2 个专栏收录

161 篇文章 3 订阅

订阅专栏

javascript

49 篇文章 0 订阅

订阅专栏

点击之后，生成笼罩层，用户就不能点击其他的，也增加了用户体验度。

总的代码：下面来再分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
        <form id="createfrom" method="post" action="{:url('Douniuplaywjy/roomcreate')}">
            <input name="ll" type="text">
        </form>
        <button value="提交" οnclick="$('#createfrom').submit();">提交试试</button>
</body>
<script src="__STATIC__/game/js/jquery-1.12.1.js" type="text/javascript"></script>
<script src="__STATIC__/js/setajax.js"></script>
<script>
    $('#createfrom').ajaxsubmit({success:function(ret){
        window.location.href=ret.url;
    }});
    // JavaScript Document
    (function($){
        //传入的$为jq对象
        $.fn.ajaxsubmit = function(options){
            var defaults = {
                tip: $('<div class="showtip" style="position:fixed; display:none; background:rgba(0,0,0,0.5); z-index:1000000; top:0; bottom:0; left:0; right:0;"><div  style="position:absolute; top:40%; text-align:center; width:100%;"><span class="msgbox" style="border:1px solid #ffffff;box-shadow: 0px 2px 5px #000;padding:15px 40px; background:#FFFFFF; border-radius:4px;"></span></div></div>'),
                success: function(ret){

                },
                returnform:true,
                tiptimeout:500,
                processing:'正在处理……'
            }
            //合并配置
            var opts = jQuery.extend({}, defaults, options);
            return this.each(function(index, element) {
                $(element).submit(function(e) {
                    var url = $(element).attr('action');
                    var data = $(element).serialize();
                    var method = $(element).attr('method');
                    var callback = typeof($(element).attr('callback')) == 'undefined' ? 'jump' : $(element).attr('callback');
                    //正在处理
                    opts.tip.find('.msgbox').html(opts.processing);
                    $('body').append(opts.tip);
                    opts.tip.css('color', 'green');
                    opts.tip.show();
                    $.ajax({
                        url : url,
                        data : data,
                        type : method,
                        dataType:"json",
                        success:function(ret){
                            //得到结果之后如何处理
                            //成功并且指定要跳转
                            opts.tip.find('.msgbox').html(ret.msg);
                            if(ret.code == 1){
                                //设置正确信息
                                opts.tip.css('color', 'green');
                                //通过form上面的callback属性指定跳转回调
                                if(callback == "jump"){
                                    window.location.href = ret.url;
                                }else if(callback == "reload"){
                                    window.location.reload();
                                }else{
                                    //回调方法
                                    opts.success(ret);
                                }
                                if(opts.returnform){
                                    element.reset();
                                }
                            }else{
                                opts.tip.css('color', 'red');
                            }
                            setTimeout(function(){
                                opts.tip.hide();
                            }, opts.tiptimeout);
                        }
                    });
                    //禁止同步跳转
                    return false;
                });
            });
        }
    })(jQuery);

     $('form[callback="none"]').ajaxsubmit();
</script>
</html>

 <button value="提交" οnclick="$('#createfrom').submit();">提交试试</button>

先触发，把这个提交了。

 $('#createfrom').ajaxsubmit({success:function(ret){
        window.location.href=ret.url;
    }});

如果触发成功，返回的链接。

php端：

$this->success('创建成功', url('index', array('room_id' => $ret)));

success(msg,url);

廖圣平

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录