萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery中驗證表單提交方式及序列化表單內容的實現

jQuery中驗證表單提交方式及序列化表單內容的實現

 之前項目中使用的表單提交方式,使用form()方法可以將提交事件脫離submit按鈕,綁定到任何事件中,下面有個不錯的示例大家可以參考下

之前項目中使用的表單提交方式    使用form()方法可以將提交事件脫離submit按鈕,綁定到任何事件中  代碼如下: function addSubmit(){  $('#addForm').form('submit', {  url : _basePath + '/@Controller/@RequestMapping',  onSubmit : function() {  if(boolean){//放置能否提交的判斷條件  $.messager.show({  title:'提示',msg:'不符合保存條件',  showType:'fade',style:{right:'',bottom:''}  });  return false;//阻止表單提交  }  return $('#addForm').form('validate');//判斷required項是否全部有值  },  success : function(data) {  var obj = jQuery.parseJSON(data);//將返回的JSON轉化為所需對象(ResponseData)  if (!obj.success) {//判斷返回的ResponseData對象中標示狀態的屬性值  $.messager.show({  title:'提示',msg:'保存失敗',  showType:'fade',style:{right:'',bottom:''}  });  } else {  $.messager.show({  title:'提示',msg:'保存成功',  showType:'fade',style:{right:'',bottom:''}  });  $("#addWin").window("close");//關閉提交pwkk  query();//刷新結果集  }  }  });  }    今天在《鋒利的jQuery》中又讀到這樣一種提交方式,使用ajax封裝了表單內容用post提交  代碼如下: $("#btn").click(function() {  $.get("get.php", {username:$("#username").val(), password:$("#password").val()}, function(data, textStatus) {//將表單中的數據逐條取出後封裝上傳  $("#target").html(data);//將返回值填充至頁面中  });  });    而後有一個簡化版,使用serialize()方法序列化  代碼如下: $("#btn").click(function() {  $.get("get.php", $("#form").serialize(), function(data, textStatus) {//將表單中的數據逐條取出後封裝上傳  $("#target").html(data);//將返回值填充至頁面中  });  });    serialize()方法可以自動編碼,而且除表單之外的如checkbox等對象也可以使用其進行轉換    同時還有serializeArray()方法可以將元素序列化後返回數組形式的JSON對象,而非JSON字符串    即無需使用jQuery.parseJSON()方法進行轉換    返回值可直接使用類似$.each()等方法進行操作使用 
copyright © 萬盛學電腦網 all rights reserved