layui form表单与 ajax冲突暂时的解决办法

太过爱你忘了你带给我的痛 2022-11-08 11:23 183阅读 0赞

在layui 的form表单比如提交标题和密码

<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">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
          <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">辅助文字</div>
      </div>
    
     
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
     
    <script>
    //Demo
    layui.use('form', function(){
      var form = layui.form;
      
      //监听提交
      form.on('submit(formDemo)', function(data){
        layer.msg(JSON.stringify(data.field));
        return false;
      });
    });
    </script>

在监听提交时 如果使用ajax。异步会失效。

从post方法 会变成类似这样的路径:

http://www.xxxxxxxxxxxx./sbumit?param1=xxxxxxxxx&param2=yyyyyyyyyyyy

**我的解决方式:**

**把 <form> 修改为 <div> 但是 class 不变 取消action**

**这样即可以触发ajax 也可以 实现表单的相关数据获取和验证。**

**但是REset方式则不能够正确使用**