将“表单数据”发送到 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')