suchen

Heim >Web-Frontend >js-Tutorial >jQuery serialisiert das Formular in eine Instanz des Object-Objekts

jQuery serialisiert das Formular in eine Instanz des Object-Objekts

高洛峰
高洛峰Original
2016-12-03 15:42:531451Durchsuche

Bei der Validierung eines Formulars müssen Sie häufig den Wert des Elements mit name='***' im Formular ermitteln und ihn dann beurteilen. jQuery stellt jQuery.serizlizeArray bereit, um das Formular in ein Array zu serialisieren. Trotzdem sind Arrays für uns immer noch unpraktisch. Ich muss das Formular in ein Objekt serialisieren. Das erleichtert uns die Bedienung.

Das Folgende ist der Code: 

/** 
 * @author gaohuia 
 */
  
(function($){ 
  $.fn.extend({ 
    serializeObject:function(){ 
      if(this.length>1){ 
        return false; 
      } 
      var arr=this.serializeArray(); 
      var obj=new Object; 
      $.each(arr,function(k,v){ 
        obj[v.name]=v.value; 
      }); 
      return obj; 
    } 
  }); 
})(jQuery); 
/**
 * @author gaohuia
 */
  
(function($){
    $.fn.extend({
       serializeObject:function(){
           if(this.length>1){
              return false;
           }
           var arr=this.serializeArray();
           var obj=new Object;
           $.each(arr,function(k,v){
              obj[v.name]=v.value;
           });
           return obj;
       }
    });
})(jQuery);

Test

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jQuery.formtool.js"></script> 
<title>无标题文档</title> 
<script language="javascript"> 
$(function(){ 
    
  $(":button").click(function(){ 
    var test=$("form").serializeObject(); 
    alert(test.id);    
  }); 
}); 
  
</script> 
</head> 
<body> 
<form action="" method="get"><input name="id" type="hidden" value="110" /> 
<input name="test" type="text" /> 
<input name="" type="button" /> 
</form> 
</body> 
</html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jQuery.formtool.js"></script>
<title>无标题文档</title>
<script language="javascript">
$(function(){
    
    $(":button").click(function(){
       var test=$("form").serializeObject();
       alert(test.id);     
    });
});
  
</script>
</head>
<body>
<form action="" method="get"><input name="id" type="hidden" value="110" />
<input name="test" type="text" />
<input name="" type="button" />
</form>
</body>

Das Obige ist der Inhalt von jQuery, der das Formular in eine Instanz eines Object-Objekts serialisiert Achten Sie auf weitere verwandte Inhalte auf der chinesischen PHP-Website (www.php.cn)!


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der JavaScript-Implementierungsmethode von HeapNächster Artikel：Detaillierte Erläuterung der JavaScript-Implementierungsmethode von Heap

In Verbindung stehende Artikel

Mehr sehen