jquery+ajaxはフォームデータの非同期送信を実装します

今回は、フォームデータの非同期送信を実装するための jquery+ajax と、フォームデータの非同期送信を実装するための jquery+ajax を紹介します 注意事項 以下は実際的なケースです。見てみましょう。

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

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

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

1. ファイルなしの Ajax 送信データ:

html: フォーム

 <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: フォーム

ファイルアップロード

を含むフォームでは、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の非同期処理</p>
<pre class="brush:php;toolbar:false">$("#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("请求失败")
     }
    })
    
 })

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQuery を使用してフロントエンド検索を実装する

jquery は、テキスト ボックスにカウントするドロップダウン ボックスの値を選択します

jQuery zTree は、子ノードを繰り返し追加します非同期処理

jQu ery ページ要素を動的に制御する方法

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