JQueryはFormData異歩に基づいてデータファイルを提出します。

3325 ワード

JQuery FormData 非同期

webでのデータ提出イベントは頻繁に発生しますが、多くの場合、htmlのフォームを使って提出したくないです。フォームの提出は現在のブラウザの操作を中断して、他のアドレスに転送されます。（このアドレスが現在のページであっても）、重複してロードされます。非同期の提出効果は、ユーザーにより良い体験を与えるために、ajaxを使用します。ajaxはフォームに依存せずにhttp要求を開始し、サーバーの応答データを取り戻すことができます。これはajaxの簡便さです。私達はJQueryの中で良いajax関数を包装して、更に簡便です。ajaxを使って非同期でデータを提出する方法をいくつか挙げます。
一：jquery.jsの中の$ajax方法
この方法はjquery.jsプラグインに依存しています。たくさんのバージョンがあります。自分でダウンロードできます。
この$ajaxメソッドでは、要求アドレス、要求タイプ、送信が必要なデータ、要求成功後に実行する必要がある動作などのパラメータを指定します。ここで簡単に説明します。


$.ajax({
    url:"  url  ",
    type:'post',
    data:{key:'value'},
    success:function(){
      alert('  ')；
    }
  })

これは$ajaxメソッドの簡単な使い方です。このパラメータはデータを送信するためのものです。ここではdataはJsonオブジェクトと文字列をサポートしています。dataデータがformフォームの中の場合、自分でjsonを書くのは遅いです。jqueryの中のserizlizeを使うことができます。この方法は文字列を返します。各フォームが提出されたときも同じ書式に変換された文字列です。


$.ajax({
    url:"  url  ",
    type:'post',
    data:$('form').serialize(), // "id=asdasd&s=000&name=1233"
    success:function(){
      alert('  ')；
    }
  })

書類もこのように提出しますか？
ファイルの提出に対しては、私たちは$ajaxに対して特別な設定を行い、FormDataのオブジェクトを使用する必要があります。<input type="file" name="f" id="f" multiple>


var fd = new FormData();
    fd.append("name", "bill");
    fd.append("photo", $('#f')[0].files[0]);
    fd.append("photo2", $('#f')[0].files[1]);
    $.ajax({
      url: '/webform1.aspx',
      type: 'post',
      processData: false,
      contentType: false,
      data: fd,
      success: function () {
        alert("ok")
      }
    })

fdオブジェクトを作成してキーペアを追加します。この値はファイルでもいいです。f')[0]は、ID=fを取り出す要素であり、なぜ[0]なのかというと、jqueryオブジェクトにはデフォルトでは0のインデックスがあり、そのDom要素を取り出すために用いられています。ファイルを取り出しにfilesを使います。ここで私はfiles[0]とfiles[1]を使っています。これはmultipleです。複数のファイルをアップロードできます。ここで2つアップロードしました。
その後、サーバーはファイルを受信できます。フォームと同じ受信方法です。
もちろん、一つのフォームを直接FormDataオブジェクトに変換することができます。このようにして、必要な内容を一つ一つappedからFormDataの中に入れることは避けられます。


var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
 url: "stash.php",
 type: "POST",
 data: fd,
 processData: false, //      
 contentType: false  //        
});

appedを使用して追加した時にformdataのkeyが既に存在したら、重複して追加することはできません。今回のapped操作を無視します。これは常にフォームを使用して値を取り出すには不利です。set方法を使って新たなkey-value値を追加することを提案します。setの意味は既に存在しているキーペアを修正します。存在しない場合は作成します。すなわち
fd.set（「CustoomField」、「This is some extra」）
ajaxはアクティブイベントですが、ユーザーがボタンを押してから実行したいです。ここでは、ボタンのclickイベントにajax関数を置いてもいいです。次の方法を使ってもいいです。


$('form').submit(function{
  //       ，          
$.ajax({ 
     
   });
   return false;
})

submit関数は、フォームが提出されたときに実行できます。これを$ajax関数を実行するトリガイベントとして使用して、return falseを使用して、このフォームの提出を事前に停止します。
注意：一部の文章ではFormDataの互換性の問題についてFormDataが早く提出されました。そして株に入りますよ。jqueryの中のajaxを使ってファイルを転送するには、次の2つの方法がFormDataを使っているからです。もちろん原生のajaxは直接ファイルを転送する方法があります。興味がある人は見てください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。