尝试使用AJAX发送FormData时表单数据没有通过？

更新

自从John Conde提出建议以来，我将更准确地描述我的问题。

在main.js中，我试图在提交时将表单对象发送到addevent.php 。 我这样做是通过选择表单对象并创建FormData对象并使用AJAX将其发送到addevent.php ：

 $("form[name='add-event-form']").submit(function(e){ e.preventDefault(); var title = $(this).find("input[name='title']").val(); var start_date = $(this).find("input[name='start_date']").val(); var start_time = $(this).find("input[name='start_time']").val(); var end_date = $(this).find("input[name='end_date']").val(); var end_time = $(this).find("input[name='end_time']").val(); var place = $(this).find("input[name='place']").val(); var description = $(this).find("input[name='description']").val(); var file = $(this).find("input[name='file']")[0].files[0]; var fileData = new FormData(); fileData.append('file', file); var data = {title: title, start_date: start_date, start_time: start_time, end_date: end_date, end_time: end_time, place: place, description: description, file: fileData}; console.log(data); if(title && start_date && start_time){ var event_form = $.ajax({ url: 'ajax/addevent.php', method: 'POST', processData: false, contentType: false, data: data, dataType: 'json', error: function (error){ console.log(error); }, success: function (json){ console.log(json); }, complete: function (jqXHR, textStatus) { console.log(`AJAX thinks login request was a ${textStatus}`); } }); } 

但是，我知道没有什么是通过b / c我从AJAX调用返回的对象有以下错误：

我知道我在AJAX调用中发送的data对象是填写的b / c我已将其打印出来：

很明显，由于某种原因，我的data对象没有被发送到我的addevent.php 。 我认为这是processData: false, contentType: false的b / c processData: false, contentType: false 。 我这样做的原因是b / c我正试图在我的addevent.php上传一个文件， 这篇文章说我在我的AJAX调用中做了processData: false, contentType: false 。

如果你知道我做错了，请告诉我，谢谢！

码

addevent.php

 prepare($query); //Set up return $error['error'] = array(); //N2SELF: N2Do DATA VALIDATION if(!empty($_FILES['file'])){ $image=$_FILES['file']; $file_name=$_FILES['file']['name']; $image_tmp =$_FILES['file']['tmp_name']; if($_FILES['file']['error'] === 0){ $file_path = "images/"; $move_successfully = move_uploaded_file( $image_tmp, $file_path.$file_name); if(!$move_successfully){ $error['error'][] = "$image_tmp was not moved successfully"; } $_SESSION['photos'][] = $file_name; $error['error'][] = "$image_tmp was moved successfully"; } } foreach($fields as $field){ if($field === 'title' || $field === 'start_date' || $field === 'start_time'){ if(empty($_POST[$field])){ $error['error'][] = "No required field: $field"; } } if($field === 'title'){ $value = (!empty($_POST[$field])) ? $_POST[$field] : "Untitled"; }elseif($field === 'start_date'){ $value = (!empty($_POST[$field])) ? $_POST[$field] : "NO DATE"; } elseif($field === 'start_time'){ $value = (!empty($_POST[$field])) ? $_POST[$field] : "NO TIME"; }else{ $value = (!empty($_POST[$field])) ? $_POST[$field] : NULL; } $parameter = ":$field"; $paramToValues[$parameter] = $value; } $executed = $stmt->execute($paramToValues); if(!$executed){ $error['error'][] = "SQL query $query not executed"; echo json_encode($error); exit(); } foreach($fields as $field){ $error['fields'][] = $_POST[$field]; } echo json_encode($error); ?> 

Answer 1

使用formData ，在.submit()使用this来引用当前表单。

 $("form[name='event-form']").submit(function(e){ e.preventDefault(); var formData = new FormData(this); $.ajax({ url: 'ajax/addevent.php', type: 'POST', data: formData, dataType: 'json', error: function (error) { console.log(error); }, contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+) processData: false, // NEEDED, DON'T OMIT THIS success: function (json) { console.log(json); }, complete: function (jqXHR, textStatus) { console.log(`AJAX thinks login request was a ${textStatus}`); } }); });