ajax 和layer结合使用

1 html
index.html 父窗口
<div class="row">
<p><a id="btn-add" class="btn btn-default">添加</a></p>
</div>


 $('#btn-add').on('click', function(){
   layer.open({
     type: 2,
     title: '添加主机',
     maxmin: true,
     shadeClose: true, //点击遮罩关闭层
     area : ['450px' , '350px'],
     content: 'add.html'
   });
});


add.html子界面
<div class="container">
<div class="row col-md-12" style="margin-top: 10px">
<form id="form-add" action="" method="post">
                {% csrf_token %}
<div class="form-group">
    <input type="email" class="form-control" name="hostname" placeholder="请输入主机名称" />
    <p class="text-danger"></p>    
  </div>
  <div class="form-group">
    <input type="email" class="form-control" name="ip" placeholder="请输入IP地址" />
    <p class="text-danger"></p>    
  </div>
  <div class="form-group">
    <input type="email" class="form-control" name="port" placeholder="请输入端口号" />
    <p id="msg" class="text-danger"></p>
  </div>
  <div class="form-group">
    <a id="host-add" class="btn btn-default btn-block">提交</a>
  </div>
</form>
</div>
</div>


2 ajax和layer
$(document).ready(function () {
            $('#host-add').on('click',function () {
                $.ajax({
                    url:'/host-add/',
                    type:'POST',
                    data:$('#form-add').serialize(),
                    dataType:'JSON',
                    success: function (data) {
                       if(data.ok == 1){
                           var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.msg('添加成功', {icon: 6}); //添加成功后提示
                            parent.layer.close(index); //关闭弹层的窗口
                            location.reload() //刷父界面




                       }else {
                           parent.layer.msg('添加失败', {icon: 5,time:1000});
                       }
                    }

                })

下面介绍全页面刷新方法:有时候可能会用到
window.location.reload()刷新当前页面.
parent.location.reload()刷新父亲对象(用于框架)
opener.location.reload()刷新父窗口对象(用于单开窗口)
top.location.reload()刷新最顶端对象(用于多开窗口)


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值