layui.form用ajax提交表单时的问题(巨坑)

主要问题：使用layui的form组件用ajax提交表单发送请求时，总是无法收到回调函数，success与error中的回调均不执行，且该表单会自动刷新。

解决办法：在提交表单的方法`form.on()`中添加`return false`，以防止表单自动跳转刷新

代码示例：

            form.on("submit(sub)", function (obj) {var user = obj.field;layer.load(5, { shade: [0.5, "#5588AA"] });$.ajax({type: "POST",data: user,url: "/Storage/OutStorageOperation",//async: false,success: function (result) {if (result.success == true) {debuggerlayer.closeAll("loading");layer.msg(result.message, { icon: 2 });//debugger//parent.layer.closeAll();}else {layer.closeAll("loading");//debuggerlayer.msg(result.message, { icon: 5 });}},error: function () {alert("cuowu")}})//一定要加上这一句，这样ajax方法才能正确执行，且表单不会自动刷新return false;})

这里附上官方文档的说明：

form.on('submit(*)', function(data){console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

参考：
layui使用AJAX提交表单的注意事项，记录踩过的坑
layer中form表单使用ajax不成功的解决问题方法

记录下解决过程：
解决这个问题花了很久的时间，因为表单的自动刷新导致在浏览器控制台的错误数据刚出来就会被刷新掉。找问题找了半天，设置了断点进行了多次调试运行，下面是我曾试过的解决方法：
1.改layui版本。
2.修改网页的编码格式，将utf-8改成中文编码
3.先在network中查到了一个status为canceled的错误，于是百度查找解决办法，给出的解办法是在ajax请求中设置如下参数：async: false，即将其改为同步。

这里简单了解下ajax同步与异步的作用：
async. 默认是 true，即为异步方式，$.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，这时候执行的是两个线程。
　async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

响应状态status为canceled，解决办法
响应状态Status为canceled 解决方法
我添加了async: false并在success回调函数中设置debugger再次调试，这时程序会ajax可以发送请求且会执行success回调中的方法，但表单依然会自动刷新，我设置的layer.msg(result.message, { icon: 5 });弹窗在使用调试模式的时候根本看不到，这里可以说问题解决了一半。
4.到了第二天早上，转换了一下思路，具体分析了一下具体问题，继续百度，问题改为在layer页面中发送ajax请求失败，这才找到了正确的解决办法，在语句的最后加上return false来避免表单刷新，这样ajax请求不回调与表单刷新的问题就都解决了。并且我把第一次设置的async: false参数注释后，表单也能正确提交且ajax能正确回调success函数中的内容。

经验及总结：下次遇到问题的时候，要具体分析问题出现的具体场景，先尽量弄明白问题可能是什么，会出在哪里，才能针对性的去解决问题，如果像无头苍蝇一样到处乱找,既浪费了很多时间，而且问题又得不到解决，自己却因为这个问题卡了好久越来越丧气。
比如这个坑，首先应该思考是在layui.form中出现的问题，然后是其中的ajax请求发送失败，且没有执行相应的回调方法，这就是具体的问题，接下来按照这个问题去查找就很容易得到正确的解决方法。