| layui的form表单提交问题 | 您所在的位置：网站首页 › 安徽中考数学押题 › layui的form表单提交问题 |
|
无任何的设置的情况下，默认使用form标签中action的地址，method就算进行更改也是没有用的，它就是只能用get方法进行请求 解决方法有两种 使用js绑定点击函数来实现异步请求（在js中写updatePassword（）函数，用异步请求，可改请求类型）； 提交但是你会发现有一个问题，就是提交后页面自动刷新了，提示一闪而过，原因是触发了layui的js函数，因为如果不将按钮type设置值的，就是默认为submit的类型，所以需要为这个按钮设置type属性为button即可，不然就是相当于触发了form自带的action提交，触发了两次（一次ajax，一次form中action请求）。 提交其实用这个方法相当于只用layui的界面和非空校验,提交后无论怎么样都不会清空已经填写的内容，如果不想改type的值，就需要重新写触发事件。下面代码就是什么都不干，就是不触发form表单的提交。 form.on('submit(formDemo)', function(data){ return false; }) 第二种使用layui提供的方法：这个方法按钮一定要有lay-submit lay-filter="formDemo" 属性，而且不要改type为button，不然找不到的，而且用第二种方法拿值表单属性一定要有class="layui-form" 在写各种请求就可以了，拿数据的方式有很多种 //一种就是用js设置id，拿各个数据的值，在用ajax进行传输，这个就没有利用上name属性了，这里我采用了第一种 //另一种就是利用data.field.name参数拿到form表单的值(这个name就是设置的name属性，是要写你的name值)，在进行传输就可以了 var form = layui.form; form.on('submit(formDemo)', function(data) {//formDemo是按钮的名字，就是lay-filter属性。 console.log(data) if($("#confirmNewPassword").val() !=""&&$("#newPassword").val()&&$("#oldPassword").val() !=""){ if($('#confirmNewPassword').val()==$('#newPassword').val()) { $.ajax({ type: 'Put', url: '/account/updatePassword', dataType:'json', data: { type: "student", oldPassword: $("#oldPassword").val(), newPassword: $("#newPassword").val(), }, success: function (res) { if (res.status=="1"){ layer.open({ title: '更改结果' ,content: '密码更改成功' ,icon: 1 }); } else { layer.open({ title: '更改结果' ,content: '密码更改失败，请检验原始密码是否正确' ,icon: 2 }); } document.getElementById("reset").click(); }, error: function (errMsg) { //todo console.log(errMsg); } }) } else{ layer.open({ title: '警告' ,content: '新密码两次必须相同' ,icon: 2 }); } } else{ layer.open({ title: '警告' ,content: '密码不能为空' ,icon: 2 }); } return false;//这个很重要，可以防止页面一闪而过，没有提示信息。 }) |
| CopyRight 2018-2019 实验室设备网 版权所有 |