Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispielanalyse der JQuery-Ajax-Methode zum asynchronen Senden von Formulardaten

小云云
Freigeben: 2017-12-26 15:16:27
Original
1838 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Methode zur asynchronen Übermittlung von Formulardaten in JQuery Ajax vor. Ich hoffe, dass er jedem helfen kann.

Verwenden Sie die Ajax-Methode von jquery, um das Formular asynchron zu senden. Nach dem Erfolg werden die JSON-Daten im Hintergrund zurückgegeben und von der Rückruffunktion verarbeitet. Sie können asynchrone Zwecke erreichen, ohne die Seite zu aktualisieren

Sie können die Methode „form data ()“ für die Serialisierung verwenden. Wenn die übermittelten Daten einen Dateistream enthalten, müssen Sie das FormData-Objekt verwenden:

Formulardaten ohne Datei verwenden: var data = $(form).serialize();

Verwendung von Formulardaten mit Dateien: var data = new FormData($(form)[0]);

1 . Ajax-Übermittlungsdaten ohne Dateien:

html: Formular


 <form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post">    
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="password" name="password" placeholder="密码"/>
 </form>
<button type="button" id="submitAdd">确认</button>
Nach dem Login kopieren
jquery asynchrone Verarbeitung


 $("#submitAdd").click(function(){
    
   var targetUrl = $("#addForm").attr("action");    
   var data = $("#addForm").serialize();     
    $.ajax({ 
     type:&#39;post&#39;,  
     url:targetUrl, 
     cache: false,
     data:data,  
     dataType:&#39;json&#39;, 
     success:function(data){      
       alert(&#39;success&#39;);
     },
     error:function(){ 
      alert("请求失败")
     }
    })
    
 })
Nach dem Login kopieren

2. Ajax-Übermittlung von Daten mit Dateien:

HTML: Formular

Formulare mit Datei-Uploads müssen im Attribut
tag enctype="multipart/form-data" hinzugefügt werden:


<form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post"enctype=" multipart/form-data">    
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="password" name="password" placeholder="密码"/>
  <input type="file" name="avatar" />
 </form>
<button type="button" id="submitAdd">确认</button>
Nach dem Login kopieren
jquery asynchronous processing


$("#submitAdd").click(function(){
    
   var targetUrl = $("#addForm").attr("action");    
   var data = new FormData($( "#addForm" )[0]);     
    $.ajax({ 
     type:&#39;post&#39;,  
     url:targetUrl, 
     cache: false,    //上传文件不需缓存
     processData: false, //需设置为false。因为data值是FormData对象,不需要对数据做处理
     contentType: false, //需设置为false。因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
     data:data,  
     dataType:&#39;json&#39;, 
     success:function(data){      
       alert(&#39;success&#39;);
     },
     error:function(){ 
      alert("请求失败")
     }
    })
    
 })
Nach dem Login kopieren
Das Obige dient zur Verwendung des -Formulars zum Erstellen des FormData-Objekts. Wenn kein -Formular vorhanden ist, lautet die Verarbeitungsmethode wie folgt:

html : Es gibt kein Formular


<p id="uploadFile">
 <input id="file" name="avatar" type="file"/>
 <button id="upload" data-url="/admin/upload" type="button">上传头像</button>
</p>
Nach dem Login kopieren
jquery asynchrone Verarbeitung:


$("#upload").click(function(){
    
   var targetUrl = $(this).attr("data-url");    
   var data = new FormData();
   //FormData对象加入参数
   data.append(&#39;file&#39;, $(&#39;#file&#39;)[0].files[0]); //&#39;file&#39; 为参数名,$(&#39;#file&#39;)[0].files[0])获取上传的文件,如果需上传多个文件,要在<input>标签加上属性multiple    
    $.ajax({ 
     type:&#39;post&#39;,  
     url:targetUrl, 
     cache: false,    
     processData: false, 
     contentType: false, 
     data:data,  
     dataType:&#39;json&#39;, 
     success:function(data){      
       alert(&#39;success&#39;);
     },
     error:function(){ 
      alert("请求失败")
     }
    })
    
 })
Nach dem Login kopieren
Verwandte Empfehlungen:


Beispielanalyse der asynchronen Ajax-Anfragetechnologie

Erläutern Sie die asynchrone Ajax-Anfragetechnologie anhand von Beispielen

Vortrag über die Verwendung asynchroner Ajax-Anfragen mit Beispielen

Das obige ist der detaillierte Inhalt vonBeispielanalyse der JQuery-Ajax-Methode zum asynchronen Senden von Formulardaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage