將“表單數據”發送到 AJAX 調用

Question

html 零件

<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 零件

$('.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 調用中同時傳遞文件和普通數據。 我認為序列化方法將表單數據轉換為字符串，我也想發送文件，所以如何實現這一點。

Answer 1

$('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'))

Answer 2

您可以使用 FormData object 和 append 將要發送到服務器的值。

如果您正在發出發布請求，則需要 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')