Exemple d'analyse de la méthode jquery ajax de soumission asynchrone des données de formulaire

Cet article présente principalement la méthode de soumission asynchrone des données de formulaire dans jquery ajax pour tout le monde. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

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 traitées par la fonction de rappel. Vous pouvez atteindre des objectifs asynchrones sans actualiser la page

.

Vous pouvez utiliser serialize pour traiter la méthode des données du formulaire. () pour la sérialisation, et si les données soumises incluent un flux de fichier, vous devez utiliser l'objet FormData :

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

Utilisation des 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. Soumission Ajax des données avec des fichiers :

html : formulaire

Les formulaires avec téléchargement de fichiers doivent être ajouté dans l'attribut

de la balise enctype="multipart/form-data" :

<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. : Il n'y a 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(&#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("请求失败")
     }
    })
    
 })

Recommandations associées :

Exemple d'analyse de la technologie de requête asynchrone Ajax

Expliquez la technologie de requête asynchrone Ajax avec des exemples

Parler sur l'utilisation des requêtes asynchrones ajax avec des exemples

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!