フォームデータを非同期送信するjquery ajaxメソッドの分析例-jsチュートリアル-php.cn

フォームデータを非同期送信するjquery ajaxメソッドの分析例

小云云

リリース： 2017-12-26 15:16:27

オリジナル

1868 人が閲覧しました

この記事は、jquery ajax でフォームデータを非同期に送信する方法を主に紹介しています。興味のある方は参考にしていただければ幸いです。

jquery の ajax メソッドを使用してフォームを非同期に送信すると、JSON データがバックグラウンドで返され、ページを更新せずに非同期の目的を達成できます。 Serialize() メソッドを使用してシリアル化できます。送信されたデータにファイルストリームが含まれている場合は、FormData オブジェクトを使用する必要があります:

ファイルのないフォームデータは次を使用します: var data = $(form).serialize();

ファイルを含むフォームデータは次を使用します: var data = new FormData($(form)[0]);

1. ファイルを含まない Ajax 送信データ:

html: form form

 <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 非同期処理

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

ログイン後にコピー

2 、ファイルを含む Ajax 送信データ:

html: form form

ファイルアップロードを含むフォームフォームは、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>

ログイン後にコピー

jquery 非同期処理

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

ログイン後にコピー

上記は、フォームを使用して FormData オブジェクトを構築する方法です。

html: フォームはありません

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

ログイン後にコピー

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

ログイン後にコピー