天天看點

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),