我使用 ajax 將多個表單資料作為 formdata 物件發送到 python 燒瓶。就像這里的例子一樣。
在下面的代碼中，我使用 ajax 將兩種形式的資料發送到燒瓶。我無法在服務器端檢索它，但是我設法在 python 上使用 request.files 獲取檔案。
但我無法檢索或查看附加到 ajax 請求的表單資料物件，其 id 為“form-2”。
如何查看后端第二個表單中填寫的輸入值。
<html>
<body>
<form id="form1">
<input type="file" name="file[]" multiple id="file-input" />
<form>
<form id="form2">
<div class="preference">
<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">
</div>
<select name="course">
<option value="1">HTML</option>
<option value="2">CSS</option>
<option value="3">JAVA SCRIPT</option>
</select>
<form>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("input[type='file']").on("change", function(ev) {
ev.preventDefault(); // Prevent browser default submit.
var form_data = new FormData()
var all_files = document.querySelector('input[type=file]').files
var totalfiles = all_files.length;
for (var i = 0; i < totalfiles; i ) {
console.log(all_files[i]);
form_data.append("files[]", all_files[i]);
console.log("Added " (1 i) " files in formdata");
}
console.log("added all files completely! ...appending advance options");
var formdata2 = new FormData(document.getElementById('form-2'));
form_data.append("advance_options", formdata2)
console.log("successfully appended..calling ajax func");
send_request_to_flask(form_data);
});
</script>
<script>
function send_request_to_flask(form_data_parameter){
$.ajax({
url: "http://127.0.0.1:5000",
type: "POST",
data: form_data,
contentType: false,
cache: false,
dataType: 'json',
processData:false,
withCredentials:true,
beforeSend: function(xhr) {
},
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if(xhr.upload){
xhr.upload.addEventListener('progress', function(event){
var percent = 0;
if (event.lengthComputable) {
percent = Math.ceil(event.loaded / event.total * 100);
}
console.log(percent)
}, false);
}
return xhr;
},
success: function (msg) {
console.log(msg)
},
error: function(data){
console.log(data);
}
});
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
您不能將表單資料物件附加到另一個表單資料物件中，您必須將第二個表單中的欄位附加到第一個表單資料物件中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/515971.html