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调用中同时传递文件和普通数据。我认为serialize方法会将表单数据转换为字符串，并且我也想发送文件，以便如何实现。

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对象并附加要发送到服务器的值。

如果要发布请求，则需要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')

发送“表单数据”到AJAX调用

2 个答案: