当前位置:主页 > 织梦教程 >

织梦自定义表单ajax提交及弹窗提示

栏目分类:织梦教程   发布日期:2018-08-06   来源:www.zybox.cc   浏览次数:
站长最近在仿站是越到,目标站点表单是通过ajax提交,然后织梦自定义表单并非ajax,于是就有了这篇文章!做个记录!以后好用到!

废话不多说!直接进入主题!

第一:

    我们先对织梦自定义表单进行ajax改造,

    1. 将form元素的属性action、enctype、method去掉,添加id="form",form元素就变为<form id="form">

    2. 引入jquery库,点击【这里】引用

    3. 提交按钮增加 onclick="add_ajax()" 并把 type="submit" 修改为 type="button" 
      例如:<input type="button" value="提 交" onclick="add_ajax()" />

    4. 把ajax代码放在页面最底部(不能放在jquery库之前)

<script type="text/javascript">function add_ajax(){
    $.ajax({
        type: "POST",
        url: "/plus/diy.php",//提交到后台文件
        data: $('#form').serialize(),//表单传值
        success: function(data) { 
            alert(data);//弹窗显示PHP返回的值,如不需要显示,注释掉这行即可            
            $('#form')[0].reset();//提交后清除表单填写的值
        }
    });
    return false;
    }
</script>

到这里ajax提交后台就完成了!简单粗暴!

——

然而实际应用会发现,提示框与预期的不一样了!


下面我们接着来改造。

引用下面的css样式

.win { display: none; }
.mask-layer { position: fixed; width: 100%; height: 100%; opacity: 0.5; filter: alpha(opacity=50); background-color: black; z-index: 99998; top: 0px; left: 0px; }
.window-panel { position: fixed; z-index: 99999; top: 50%; left: 50%; background-color: white; border-radius: 4px; }
.window-panel .title-panel { position: absolute; height: 36px; width: 100%; border-radius: 4px 4px 0 0; }
.window-panel .title { position: absolute; height: 36px; width: 100%; text-align: center; border-radius: 4px 4px 0 0; line-height: 36px; vertical-align: middle; background-color: whitesmoke; /*标题背景色*/ border-bottom: 1px solid rgb(233, 233, 233); z-index: 1; }
.window-panel h3 { font-size: 16px; margin: 0; }
.window-panel .close-btn { display: block; text-align: center; vertical-align: middle; position: absolute; width: 36px; height: 36px; line-height: 36px; right: 0px; text-decoration: none; font-size: 24px; color: black; background-color: #DBDBDB; border-radius: 2px; z-index: 1; }
.window-panel .close-btn:hover { background-color: #ccc; }
.window-panel .body-panel { position: absolute; width: 100%; top: 36px; border-radius: 0 0 4px 4px; z-index: 1; }
.window-panel .content, .window-panel .btns { text-align: center; }
.window-panel .content { padding: 18px 5px 0px 5px; font-size: 16px; min-height: 40px; line-height: 22px; }
.window-panel .w-btn { display: inline-block; width: 60px; height: 26px; line-height: 26px; background-color: #DE5923; color: white; cursor: pointer; text-align: center; border-radius: 2px; text-decoration: none; margin: 0 10px 0px 10px; border: none; }
.window-panel .w-btn:hover { background-color: #DA3E00; }
.window-panel .w-btn:focus { outline: 0 none; }

接着在引用如下JS(放在jq之后)

var win = new function () {
    // 确认框和提示框宽度
    this.width = 300;

    // 确认框和提示框高度
    this.height = 172;

    // 手动关闭窗体
    this.close = function () {
        $('.win iframe').remove();
        $('.win').remove();
    };

    // 打开窗体
    this.open = function (width, height, title, url, closed) {
        this._close = function () {
            this.close();
            if ($.isFunction(closed)) closed();
        };

        var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="win._close();" class="close-btn" title="关闭">×</a><iframe class="body-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" src=""></iframe></div></div>';
        var jq = $(html);
        jq.find(".window-panel").height(height).width(width).css("margin-left", -width / 2).css("margin-top", -height / 2);
        jq.find(".title").find(":header").html(title);
        jq.find(".body-panel").height(height - 36).attr("src", url);
        jq.appendTo('body').fadeIn();
        $(".win .window-panel").focus();
    };

    // 显示消息框
    function messageBox(html, title, message) {
        win.close();
        var jq = $(html);

        jq.find(".window-panel").height(win.height).width(win.width).css("margin-left", -win.width / 2).css("margin-top", -win.height / 2);
        jq.find(".title-panel").height(win.height);
        jq.find(".title").find(":header").html(title);
        jq.find(".body-panel").height(win.height - 36);
        jq.find(".content").html(message.replace('\r\n', '<br/>'));
        jq.appendTo('body').show();
        $(".win .w-btn:first").focus();
    }

    // 确认框
    this.confirm = function (title, message, selected) {
        this._close = function (r) {
            this.close();
            if ($.isFunction(selected)) selected(r);
        };

        var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="win._close(false);" class="close-btn" title="关闭">×</a><div class="body-panel"><p class="content"></p><p class="btns"><button class="w-btn" tabindex="1" onclick="win._close(true);">确定</button><button class="w-btn" onclick="win._close(false);">取消</button></p></div></div></div>';
        messageBox(html, title, message);
    };

    // 提示框
    this.alert = function (title, message, closed) {
        this._close = function () {
            this.close();
            if ($.isFunction(closed)) closed();
        };

        var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="win._close();" class="close-btn" title="关闭">×</a><div class="body-panel"><p class="content"></p><p class="btns"><button class="w-btn" tabindex="1" onclick="win._close();">确定</button></p></div></div></div>';
        messageBox(html, title, message);
    }

    // 提示框
    this.alertEx = function (message) {
        this.alert('系统提示', message);
    }
};

然后我们在第一步中的第四条的ajax代码稍微改动下

function add_ajax(){
    $.ajax({
        type: "POST",
        url: "/plus/diy.php",//提交到后台文件
        data: $('#form').serialize(),//表单传值
        success: function(data) {
            win.alert('系统提示', data);//弹窗显示PHP返回的值
            $('#form')[0].reset();//提交后清除表单填写的值
        }
    });
    return false;
}

最终效果如图


现在如果需要修改alert样式,直接修改上面提到的样式,或者重新构造alert弹窗的结构,就去修改JS代码!


附上alert弹窗demo

https://pan.baidu.com/s/10E7myIzUAGImHkV67SMb1A

打赏本站
相关下载
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
织梦标签工具下载 ↑↓
织梦标签工具下载