Отправить "данные формы" на вызов AJAX

Question

html part

<form id="custom_form" name="custom_upload" method="POST" enctype="multipart/form-data">
<label>Choose File:</label>
 <input id="in" name="csv_file" value="Add CSV" type="file" required />
<table class="opttable">
  <tr>
     <td>
         Title<span style="color: red;">*</span>
     </td>
     <td>
     <select id="select1" class="optselect form-control">
          <option>abc</option>
          <option>cde</option>                                                      
      </select>
      </td>
   </tr>
</table>
<input type="submit" value="Submit" class="onsubmit">
</form>

javascript part

$('.onsubmit').on('click', function (e) {
      var id = {{id}}
      var fd= $('form').serialize()
      console.log(fd)
      $.ajax({
       url: '/someview/'+id,
       type: 'POST',
       data: fd,
       sucess: function(data) {
       console.log(data);
       },
       error: function(err) {
         console.log('err: '+err);
       }
    });
});

Это мой код.Так что в основном я хочу передать как файл, так и обычные данные в вызове ajax.Я думаю, что метод serialize преобразует данные формы в строки, и я также хочу отправить файл, чтобы узнать, как этого добиться.

Answer 1

Вы можете использовать объект FormData и добавлять значения, которые вы хотите отправить на сервер.

Вам нужен csrf_token, если вы делаете запрос на публикацию.Сохраните его на своей HTML-странице.Попробуйте это:

<script>
    var CSRF_TOKEN = '{{ csrf_token }}';
</script>

$('.onsubmit').on('click', function (e) {
      e.preventDefault();
      var id = {{id}};
      var formData = new FormData();
      formData.append('csvFile', $('#in')[0].files[0]);
      formData.append('csrfmiddlewaretoken', CSRF_TOKEN);

    $.ajax({
       url : '/someview/'+id,
       type : 'POST',
       data : formData,
       processData: false,
       contentType: false,
       success : function(data) {
       },
       error: function(data){
       }
    });
});

По вашему мнению, вы можете получить этот файл по

csv_file = request.FILES.get('csvFile')

Answer 2

$('form').serialize() даст вам массив объектов, подобных этому

[
{"Name":"elementname","Value":"12"},
{"Name":"elementname2","Value":"hello"}
]

Либо вы можете привести в строчку целое и отправить вот так в

data: { "formData" :JSON.stringiy(fd)}

или

вы можете преобразовать его в простое значение ключа и отправить на сервер в виде строки JSON

dataToSend={}

for(var v=0; v<fd.length;v++){
dataToSend[fd["Name"]] = fd["Value"]; 
}

и отправить данные в виде

data: { "formData":JSON.stringify(dataToSend)}

Вы можете преобразовать сторону сервера данных, используя

import json
json.loads(request.POST.get('formData'))