天天看点

vol.5 layui利用aiax向后台提交表单数据时ajax不执行反而由form表单自己完成了提交

问题:

在 form.on(‘submit(renewal)’,function (data){});中使用alert可以成功,但是ajax不能实现,且form自身完成了数据的提交;

代码:

//提交按钮
<button  type="submit" class="layui-btn" lay-submit="" lay-filter="renewal">立即提交</button>

//提交函数
form.on('submit(renewal)',function (data){
       $.ajax({
      type:"post",
      url:"http://localhost:8080/SowBirthSystem2.0/renewalB",
      dataType:"json",
      contentType:"application/json;charset=UTF-8";
      data:JSON.stringify(data.field),
      success: function(data) { // 处理后台返回结果
       var info= data;
       if(info==1) {
        alert("修改信息成功!");
        window.location.href = "${pageContext.request.contextPath}/sowSystem/login.jsp" ;
       }else if(info==2){
        alert("用户不存在,请返回注册!");
        window.location.href = "${pageContext.request.contextPath}/sowSystem/register.jsp" ;
       }else {
        alert("修改失败,请重试!");
       }
      },
      error: function() { // 请求异常
       alert("系统错误,请稍后重试");
      }
     })
     /* layer.alert(JSON.stringify(data.field), {
            title: '最终的提交信息'
        }) */
     return false;
    });
});
           

解决:

//要引入jquery
 layui.use(['jquery','form'], function(){
 var form = layui.form;
 var $= layui.jquery;
           

另外表单数据转成json数据:

layui form表单:JSON.stringify(data.field);
普通表单:var data = JSON.stringify($('#表名').serializeJSON());

普通表单引入的库;
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.serializejson.js"></script>
 
 //获取form表单的值,转成数组
 var formObject = {};
 var formArray =$("#userInfo").serializeArray();
 $.each(formArray,function(i,item){
        formObject[item.name] = item.value;
    });

//ajax填写数据
data: JSON.stringify(formObject),