jquery+ajax implémente la soumission asynchrone des données du formulaire

Cette fois, je vous apporterai jquery+ajax pour implémenter la soumission asynchrone des données du formulaire, jquery+ajax pour implémenter la soumission asynchrone des données du formulaire. Quelles sont les précautions. , et ce qui suit est le combat réel. Jetons un coup d'œil au cas.

Utilisez la méthode ajax de jquery pour soumettre le formulaire de manière asynchrone. Après succès, les données json seront renvoyées en arrière-plan et la fonction de rappel les traitera sans actualiser la page pour y parvenir. fins asynchrones

Les données traitées dans le formulaire peuvent être sérialisées à l'aide de la méthode serialize(). Si les données soumises incluent un flux de fichier, vous devez utiliser l'objet FormData :

. Utiliser les données du formulaire sans fichiers : var data = $(form).serialize();

Utiliser les données de formulaire avec des fichiers : var data = new FormData($(form)[0]);

1. Données de soumission Ajax sans fichiers :

html : formulaire

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

traitement asynchrone jquery

 $("#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. Données de soumission Ajax avec fichiers :

html : formulaire

Les formulaires avec téléchargement de fichiers doivent ajouter l'attribut enctype="multipart/form-data" à la balise

 :

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

traitement asynchrone jquery

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

Ce qui précède consiste à utiliser le formulaire pour construire l'objet FormData. S'il n'y a pas de formulaire , la méthode de traitement est la suivante :

html : Pas de formulaire

<p id="uploadFile">
 <input id="file" name="avatar" type="file"/>
 <button id="upload" data-url="/admin/upload" type="button">上传头像</button>
</p>

Traitement asynchrone jquery :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Utiliser jQuery pour implémenter la recherche frontale

jquery a sélectionné les statistiques de valeur de la liste déroulante pour la zone de texte

jQuery zTree ajoute à plusieurs reprises des nœuds enfants pendant le processus asynchrone

Comment jQuery contrôle dynamiquement les éléments de la page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!