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

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>

jquery asynchrone Verarbeitung

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

2. Ajax-Übermittlung von Daten mit Dateien:

HTML: Formular

Formulare mit Datei-Uploads müssen im Attribut ff9c23ada1bcecdd1a0fb5d5a0f18437 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>

jquery asynchronous processing

$("#submitAdd").click(function(){
    
   var targetUrl = $("#addForm").attr("action");    
   var data = new FormData($( "#addForm" )[0]);     
    $.ajax({ 
     type:'post',  
     url:targetUrl, 
     cache: false,    //上传文件不需缓存
     processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
     contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
     data:data,  
     dataType:'json', 
     success:function(data){      
       alert('success');
     },
     error:function(){ 
      alert("请求失败")
     }
    })
    
 })

Das Obige dient zur Verwendung des ff9c23ada1bcecdd1a0fb5d5a0f18437-Formulars zum Erstellen des FormData-Objekts. Wenn kein ff9c23ada1bcecdd1a0fb5d5a0f18437-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>

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("请求失败")
     }
    })
    
 })

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!