2

DjangoフォームにAJAXフォーム送信を実装しようとしています。

ファイルはAJAXなしで送信されているため、サーバー側のロジックは機能しているようです。ajaxを使用すると、ファイルを除く残りの値が送信されます。

これが私が実装しているコードです、

AJAXフォームの提出

(function() {
  // using jQuery
  function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
      var cookies = document.cookie.split(';');
      for (var i = 0; i < cookies.length; i++) {
        var cookie = jQuery.trim(cookies[i]);
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) == (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }
  var csrftoken = getCookie('csrftoken');
  function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
  $.ajaxSetup({
    crossDomain: false, // obviates need for sameOrigin test
    beforeSend: function(xhr, settings) {
    if (!csrfSafeMethod(settings.type)) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
  });
})();

jquery

$('#save-form').live('submit', function(event) { // catch the form's submit event
  event.preventDefault();
  $.ajax({ // create an AJAX call...
      data: $(this).serialize(), // get the form data
      type: $(this).attr('method'), // GET or POST
      url: '/save/', // the file to call
      success: function(response) { // on success..
          $('#modalsave-form').html(response); // update the DIV
      }
  });
  return false;
});

HTMLフォーム

<form class="form-horizontal" id="save-form" enctype="multipart/form-data" method="post" action="/save/">
    <div class="control-group">
        <label class="control-label" for="id_body">Write Something</label>
        <div class="controls">
          <textarea class="typeaheadfun" id="id_body" rows="3" cols="100" name="body" placeholder="Scribble Body" style="width: 455px;"></textarea>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="id_media">Add a File</label>
        <div class="controls">
          <input type="file" name="media" id="id_media"/>
        </div>
    </div>
    <hr>
    <input class="btn btn-primary pull-right" type="submit" value="Post!" />
    <br>
    {% csrf_token %}
</form>
4

2 に答える 2

2

HTMLフォームを送信すると、通常、GETまたはPOSTデータHTMLヘッダーを使用してフォームのデータがサーバーに送信されます。ただし、バイナリデータまたは添付ファイルをサーバーに効率的に送信する必要がある場合、その仕様の一部としてのHTMLには、そのようなデータを送信するための異なる方法があります。enctypeタグの属性は<form>、ブラウザがサーバーにデータを送信する方法を指定します。ファイルを送信するにmultipart/form-dataは、広く使用されているエンコード方法です。

ajaxを使用せずにフォームを送信しようとすると、ブラウザーはmultipart/form-dataエンコードを使用してファイルデータをサーバーに送信しますが、ajaxを使用してフォームを送信する場合は、次のようにします。

data: $(this).serialize()

このステップでは、サーバーがデータを期待するのと同じ方法でデータをエンコードしないため、ajaxは機能しません。

それを機能させるには、フォームのデータを手動で送信する代わりに、ajaxを使用してフォーム全体を送信する必要があります。手動で行うのは難しいですが、すでにそれを行うプラグインがあります。そのようなプラグインの1つは、jQueryFormPluginです。ajaxを使用してフォーム全体を送信できます。以下は、セットアップと統合する方法についてのアイデアを提供するjsコードです。

$('#save-form').live('submit', function(event) {
    event.preventDefault();

    $(this).ajaxSubmit({
        url: '/save/', // the file to call
        success: function(response) {
            $('#modalsave-form').html(response);
        }
    });

    return false;
});
于 2013-01-13T08:22:41.250 に答える
1

別のオプションは、プラグインの必要性をなくすFormDataインターフェースを使用することです。

https://developer.mozilla.org/en-US/docs/Web/API/FormData

サンプルコード:(ニーズに合わせて調整）

`

$('#fupload').click(function(){

var xhr = new XMLHttpRequest();

var token = $('input[name="csrfmiddlewaretoken"]').prop('value');
    $.ajaxSetup({
        headers: { "X-CSRFToken": token }
    });     

var formData = new FormData($('form')[0]);
formData.append('file',xhr.file);

    $.ajax({
        url: '/myurl/',  //server script to process data
        type: 'POST',
        xhr: function() {  // custom xhr
            myXhr = xhr;
            //if(xhr.upload){ // check if upload property exists
            //  xhr.upload.addEventListener('progress',progressHandlingFunction, false); 
                // for handling the progress of the upload
            //}
            return xhr;
        },
        // Form data
        data: formData,
        //Ajax events
        success: function(server_response){
            $( '#path' ).val("Success");
        },
        error: function(jqXHR, textStatus, errorThrown ){
             $( '#path' ).val(errorThrown);
         },
        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    });
});

`

于 2013-09-11T13:28:05.870 に答える