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

この記事は、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:'post',  
     url:targetUrl, 
     cache: false,
     data:data,  
     dataType:'json', 
     success:function(data){      
       alert('success');
     },
     error:function(){ 
      alert("请求失败")
     }
    })
    
 })

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

html: form form

ファイルアップロードを含むフォームフォームは、enctype="multipart/form-data" 属性を ff9c23ada1bcecdd1a0fb5d5a0f18437 タグに追加する必要があります。 :

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

上記は、ff9c23ada1bcecdd1a0fb5d5a0f18437 フォームを使用して 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("请求失败")
     }
    })
    
 })

関連推奨事項:

Ajax 非同期リクエスト技術の分析例

Ajax非同期リクエスト技術のサンプル解説

Ajax非同期リクエストの使用例について話します

以上がフォームデータを非同期送信するjquery ajaxメソッドの分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。