layui默认是在提交form表单后直接根据表单的acton动作对应的url进行跳转,这种跳转不如ajax的提交方式带给人的体验好。
网上搜索到的layui使用ajax提交表单的教程都是在调用layui的js之前先调用一下jQuery的js文件。而layui实际是内置了jq的。今天的方法就是通过内置的jq来实现ajax提交表单。
首先,引入layui.js然后html代码如下书写
<form class="layui-form layui-form-pane" action="" id="diyform"> <div class="layui-form-item"> <label class="layui-form-label">姓名:</label> <div class="layui-input-block"> <input type="text" name="name" 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-block"> <input type="text" name="phone" 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 layui-btn-danger" lay-submit lay-filter="formSub">提交</button> </div> </div> </form> <script> //Demo layui.use(['jquery', 'form'], function() { var form = layui.form, $ = layui.$; //这一行就是使用内置jQuery的关键 form.render(); //监听提交 form.on('submit(formSub)', function(data) { $.ajax({ url: "/tijiao.php", cache: true, type: "POST", data: $('#diyform').serialize() // 你的form里面的id , success: function(data) { if(data == "success") { layer.open({ title: '提示', content: "提交成功" }); } else { layer.open({ title: '提示', content: "请求错误,请联系管理员" }); } } }); return false; }); }); </script>