国际导航开发文档

表单提交

全局变量 本章完
学习其他章节 模板开发

例子
触发链接
html

<button type="button" class="cms">触发链接</button>

js

<script >
layui.use('form',function(){
  var form = layui.form
  ,jq = layui.jquery;
  jq('.cms').click(function(){
      loading = layer.load(2, {
        shade: [0.2,'#000']
      });
      jq.getJSON("链接地址", function(data) {
        if(data.code == 1){
          layer.close(loading);
          layer.msg(data.msg, {icon: 1, time: 1000}, function(){
            //成功 这里提交成功添加相应的js比如刷新页面 跳转页面等
          });
        }else{
         layer.close(loading);
          layer.msg(data.msg, {icon: 2, anim: 6, time: 1000});
        }
      });
  });
})
</script>

触发链接弹出提示

<script >
layui.use('form',function(){
  var form = layui.form
  ,jq = layui.jquery;
  jq('.cms').click(function(){
      layer.confirm('你确定要提交吗?', function(index){
      loading = layer.load(2, {
        shade: [0.2,'#000']
      });
      jq.getJSON("链接地址", function(data) {
        if(data.code == 1){
          layer.close(loading);
          layer.msg(data.msg, {icon: 1, time: 1000}, function(){
            //成功 这里提交成功添加相应的js比如刷新页面 跳转页面等
          });
        }else{
         layer.close(loading);
          layer.msg(data.msg, {icon: 2, anim: 6, time: 1000});
        }
      });
  });
 });
})
</script>

触发点填写链接

<button type="button" class="layui-btn addonscms" title="提示" url="链接" >触发</button>
<script >
layui.use(['jquery', 'form'],
function() {
    var jq = layui.jquery;
  jq('.addonscms').click(function(){
     var url = jq(this).attr('url');
     var title = jq(this).attr('title');
      layer.confirm(title, function(index){
      loading = layer.load(2, {
        shade: [0.2,'#000']
      });
      jq.getJSON(url, function(data) {
        if(data.code == 1){
          layer.close(loading);
          layer.msg(data.msg, {icon: 1, time: 1000}, function(){
            location.reload();//刷新
          });
        }else{
         layer.close(loading);
          layer.msg(data.msg, {icon: 2, anim: 2, time: 1000});
        }
      });
  });
 });
})
</script>

form表单提交一
html

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="cms">立即提交</button>
    </div>
  </div>
</form>

js

<script>
layui.use('form',function(){
  var form = layui.form
  ,jq = layui.jquery;
  form.on('submit(cms)', function(data){
    loading = layer.load(2, {
      shade: [0.2,'#000']
    });
    var param = data.field;
    jq.post('提交的表单链接',param,function(data){
      if(data.code == 1){
        layer.close(loading);
        layer.msg(data.msg, {icon: 1, time: 1000}, function(){
          location.href = '/';
        });
      }else{
        layer.close(loading);
        layer.msg(data.msg, {icon: 2, anim: 6, time: 1000});
      }
    });
    return false;
  });
});
</script>

form表单例子二
html

<form class="layui-form form-container" data-url="提交的表单链接" localtion-url="提交成功后跳转后的链接">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="cms">立即提交</button>
    </div>
  </div>
</form>

js

<script>
layui.use(['jquery', 'form'],
function() {
  var form = layui.form,jq = layui.jquery;
  var upload = layui.upload;
  var url=jq('form').data('url');
  var locationurl=jq('form').attr('localtion-url');
  jq('.layui-form').append('<input type="hidden" name="token" value="'+token+'">');
  form.on('submit(cms)', function(data){
	    loading = layer.load(2, {
	      shade: [0.2,'#000']
	    });
	    var param = data.field;
	    jq.post(url,param,function(data){
	      if(data.code == 1){
	        layer.close(loading);
	        layer.msg(data.msg, {icon: 1, time: 1000}, function(){
	          location.href = locationurl;
	        });
	      }else{
	        layer.close(loading);
	        layer.msg(data.msg, {icon: 2, anim: 6, time: 1000});
	      }
	    });
	    return false;
	  });
 })

自定义触发
html

<button type="button" member-name="弹出提示? " url="触发的链接" lay-submit lay-filter="cms">提交</button> 

js

<script>
layui.use('form',function(){
  var form = layui.form
  ,jq = layui.jquery;
  form.on('submit(cms)', function(data){
    var param = data.field;
    var name = jq(this).attr('member-name');
    var url= jq(this).attr('url');
    //弹出提示
    layer.confirm(''+name+'', function(index){
    loading = layer.load(2, {
      shade: [0.2,'#000']
    });
    jq.post(url,param,function(data){
      if(data.code == 1){
        layer.close(loading);
        layer.msg(data.msg, {icon: 1, time: 1000}, function(){
         location.reload();//刷新
        });
      }else{
        layer.close(loading);
        layer.msg(data.msg, {icon: 2, anim: 6, time: 1000});
      }
    });
    return false;
  });
  });
});
</script>
全局变量 本章完
学习其他章节 模板开发

最近更新 免责声明 关于我们

Copyright © 2020-2020W3C菜鸟教程(www.w3cstudy.cn) All Rights Reserved

国际导航开发文档