layui中form表单提交使用ajax，页面依然跳转问题解决

最新推荐文章于 2021-12-01 11:39:55 发布

焦志坤

最新推荐文章于 2021-12-01 11:39:55 发布

阅读量2.3k

点赞数 2

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/cute_boy_/article/details/119275462

版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在layui框架下，使用form表单配合AJAX进行数据提交时遇到的页面跳转问题。当点击提交按钮后，页面意外重载而非预期的AJAX提交。解决方案在于在AJAX调用的末尾添加`return false;`来阻止表单的默认提交行为，确保数据通过AJAX无刷新方式发送到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui中form表单提交使用ajax，页面依然跳转问题解决

场景：在使用form表单的时候发现页面总是会跳转并没有走到ajax中（代码如下文件引用部分不再展示）

<form class="layui-form  " id="form_show_json"  >
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="option" lay-verify="required" id="select">
        <option value="">---请选择需要展示的json文件---</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn layui-btn-radius layui-btn-warm" id="showjson" lay-submit
      lay-filter="form_demo"
        >立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
    </div>
  </div>
</form>

<script>
  layui.use(['upload', 'element', 'layer'], function () {
    var $ = layui.jquery,
      form = layui.form,

    form.on('submit(form_demo)', function (data) {
      $.ajax({
        type: 'POST',
        url: "/read_bin/show_json",
        data: $('#form_show_json').serialize(),// 获取表单提交的数据
        success: function (data) {
          console.log(data)
        }
    });
  });
</script>

问题：如上代码在点击提交之后会直接返回当前页面，（并非预期结果）
解决：ajax使用的最后需要添加return: false