layui form表单提交 layui如何实现form异步提交-Layui教程-PHP中文网

必须在 form.on('submit()') 回调中 return false 或 event.preventDefault() 阻止默认提交；data.field 不包含未选中 checkbox 或无 value 的 option；axios 需配置 withCredentials 和 Content-Type；form.render() 后需重新绑定 submit 监听。

layui form.on('submit()') 里怎么发异步请求不跳转

默认 submit 事件会触发表单原生提交，页面刷新是必然结果。要异步，必须在监听回调里 return false 或调用 event.preventdefault() 阻止默认行为——这是最常漏掉的一步，90% 的“点了没反应”或“还是跳转了”都卡在这儿。

实际操作中建议统一用 return false，更简洁且兼容 layui 2.x / 3.x：

form.on('submit(demo)', function(data){
  $.ajax({
    url: '/api/submit',
    type: 'POST',
    data: data.field,
    success: function(res) {
      layer.msg('提交成功');
      // 可选：重置表单
      form.reset('demo');
    }
  });
  return false; // ← 关键！不写这行，表单照常跳转
});

data.field 拿不到 checkbox / select multiple 的值？

layui 的 data.field 默认只收集「有 name 且被勾选/选中」的控件值，但 checkbox 多选、select multiple 容易被忽略细节：

checkbox 必须带 name，且多个同名 checkbox 的 value 值不能重复（否则后一个会覆盖前一个）
select[multiple] 必须加 multiple 属性，且每个 <option></option> 都要有 value
如果 checkbox 全未勾选，data.field 里压根不会出现这个 key —— 后端需兼容空字段，不能假设必有

验证方式很简单：在 submit 回调开头加 console.log(data.field)，点提交看控制台输出是否符合预期。

用 axios 替换 $.ajax 时遇到跨域或 header 问题

layui 本身不约束你用什么请求库，但换 axios 后容易踩两个坑：

axios 默认不带 cookie，登录态丢失 → 需显式加 { withCredentials: true }
后端若校验 Content-Type: application/json，但 data.field 是普通对象，直接传会 400 → 改用 JSON.stringify(data.field) 并设 header

正确写法示例：

axios.post('/api/submit', data.field, {
  withCredentials: true,
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.then(res => { ... });

注意：这里用 application/x-www-form-urlencoded 是因为 data.field 是键值对对象；如果后端明确要求 JSON，才改用 JSON.stringify(...) + application/json。