我有一个表单，收集有关学生的所有信息并能够上传文件。现在，我的问题是我使用ajax将此值发送到PHP。但是我无法将 formData 发送到我的php脚本。我使用inspect Element，但没有找到错误。
这是我的表格：
我使用onclick事件将输入值发送到我的JS文件。
Boolean b = null;
if(b){....}
在我的JS文件中：
这是我如何将值和文件发送到我的PHP脚本
<form class="needs-validation" id="studentAdmissionForm" enctype="multipart/form-data" onsubmit="return false;" novalidate>
<legend>Student's Information</legend>
<hr>
<div class="form-row">
<div class="col-md-12 mb-3">
<label for="lrn">Learner's Reference Number: *</label>
<input type="number" class="form-control" name="lrn" id="lrn" placeholder="LRN" maxlength="12" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" required>
<div class="invalid-tooltip">
Please provide your LRN!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-3 mb-3">
<label for="studentFname">First name: *</label>
<input type="text" class="form-control" name="studentFname" id="studentFname" placeholder="First name" maxlength="64" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-3 mb-3">
<label for="studentLname">Last name: *</label>
<input type="text" class="form-control" name="studentLname" id="studentLname" placeholder="Last name" maxlength="64" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-3 mb-3">
<label for="studentMname">Middle name: *</label>
<input type="text" class="form-control" name="studentMname" id="studentMname" placeholder="Middle name" maxlength="64" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-3 mb-3">
<label for="studentSname">Suffix name:</label>
<input type="text" class="form-control" name="studentSname" id="studentSname" placeholder="eg. Jr" maxlength="64">
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="gender">Gender: *</label>
<select class="custom-select" name="gender" id="gender" required>
<option value="">Select Gender</option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
<div class="invalid-tooltip">Please select your gender!</div>
</div>
<div class="col-md-4 mb-3">
<label for="dob">Date of Birth: *</label>
<input type="date" class="form-control" name="dob" id="dob" required>
<div class="invalid-tooltip">
Specify your date of birth!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="citizenship">Citizenship:</label>
<input type="text" class="form-control" name="citizenship" id="citizenship" placeholder="Citizenship" maxlength="64">
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="religion">Religion: *</label>
<input type="text" class="form-control" name="religion" id="religion" placeholder="Religion" maxlength="64" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="ethnicity">Ethnic Group:</label>
<input type="text" class="form-control" name="ethnicity" id="ethnicity" placeholder="Ethnic Group" maxlength="64">
</div>
<div class="col-md-4 mb-3">
<label for="motherTongue">Mother Tongue:</label>
<input type="text" class="form-control" name="motherTongue" id="motherTongue" placeholder="Mother Tongue" maxlength="64">
</div>
</div>
<legend class="mt-5">Contact Details</legend>
<hr>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="houseNum">House No. / Unit No: *</label>
<input type="text" class="form-control" name="houseNum" id="houseNum" placeholder="#" maxlength="64" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-8 mb-3">
<label for="street">Street: *</label>
<input type="text" class="form-control" name="street" id="street" placeholder="Street" maxlength="64" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="village">Subdivision / Village / Building:</label>
<input type="text" class="form-control" name="village" id="village" placeholder="Subd, Village or Building" maxlength="64">
</div>
<div class="col-md-6 mb-3">
<label for="brgy">Barangay: *</label>
<input type="text" class="form-control" name="brgy" id="brgy" placeholder="Barangay" maxlength="64" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="city">City / Municipality: *</label>
<input type="text" class="form-control" name="city" id="city" placeholder="City" maxlength="64" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="province">Province: *</label>
<select class="custom-select" name="province" id="province" required>
<option value="Tawi Tawi">Tawi-Tawi</option>
<option value="Zambales">Zambales</option>
<option value="Zamboanga Del Norte">Zamboanga Del Norte</option>
<option value="Zamboanga Del Sur">Zamboanga Del Sur</option>
<option value="Zamboanga Sibugay">Zamboanga Sibugay</option>
</select>
<div class="invalid-tooltip">Specify your province!</div>
</div>
<div class="col-md-4 mb-3">
<label for="zip">Zip Code: *</label>
<input type="number" class="form-control" name="zip" id="zip" placeholder="xxxx" maxlength="4" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="tel">Telephone No:</label>
<input type="number" class="form-control" name="tel" id="tel" placeholder="Telephone No." maxlength="7" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
</div>
<div class="col-md-4 mb-3">
<label for="mobile">Mobile No: *</label>
<input type="number" class="form-control" name="mobile" id="mobile" placeholder="09xxxxxxxxx" maxlength="12" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="email">Email address: *</label>
<input type="email" class="form-control" name="email" id="email" placeholder="example@domain.com" maxlength="64" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<legend class="mt-5">Guardian's Information</legend>
<hr>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="fatherName">Father's Name:</label>
<input type="text" class="form-control" name="fatherName" id="fatherName" placeholder="Lastname, Firstname & Middle Initial" maxlength="64">
</div>
<div class="col-md-6 mb-3">
<label for="fatherNum">Contact No:</label>
<input type="number" class="form-control" name="fatherNum" id="fatherNum" placeholder="Contact No." maxlength="12" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="motherName">Mother's Name:</label>
<input type="text" class="form-control" name="motherName" id="motherName" placeholder="Lastname, Firstname & Middle Initial" maxlength="64">
</div>
<div class="col-md-6 mb-3">
<label for="motherNum">Contact No:</label>
<input type="number" class="form-control" name="motherNum" id="motherNum" placeholder="Contact No." maxlength="12" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="guardianName">Guardian's Name:</label>
<input type="text" class="form-control" name="guardianName" id="guardianName" placeholder="Lastname, Firstname & Middle Initial" maxlength="64">
</div>
<div class="col-md-6 mb-3">
<label for="guardianNum">Contact No:</label>
<input type="number" class="form-control" name="guardianNum" id="guardianNum" placeholder="Contact No." maxlength="12" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
</div>
</div>
<legend class="mt-5">Upload File (Optional)</legend>
<hr>
<p class="mb-3">To ease up the registration and enrollment procedure, you may attach a copy of the admission requirements (e.g. Form137, Transcript of Records, PSA (formerly NSO) Issued Birth Certificate, etc.).</p>
<p class="lead">Attach Files (Maximum of 10MB and allowed formats are: .JPG, .PNG, .DOC, .DOCX, .ZIP, .RAR and .PDF)</p>
<div class="form-row">
<div class="col-md-6 mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" name="file" id="file">
<label class="custom-file-label" for="file">Choose file</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" name="admissionBtn" id="admissionBtn" onclick="submitStudentData()">Submit</button>
<span id="status"></span>
</form>
我使用formData.append（）来获取所有值并将其发送到我的php脚本。但它不会发送，我不知道问题是什么。我使用Inspect Element但没有发生错误。
这是我的Ajax模块：
function submitStudentData() {
var lrn = _("lrn").value;
var studentFname = _("studentFname").value;
var studentLname = _("studentLname").value;
var studentMname = _("studentMname").value;
var studentSname = _("studentSname").value;
var gender = _("gender").value;
var dob = _("dob").value;
var citizenship = _("citizenship").value;
var religion = _("religion").value;
var ethnicity = _("ethnicity").value;
var motherTongue = _("motherTongue").value;
var houseNum = _("houseNum").value;
var street = _("street").value;
var village = _("village").value;
var brgy = _("brgy").value;
var city = _("city").value;
var province = _("province").value;
var zip = _("zip").value;
var tel = _("tel").value;
var mobile = _("mobile").value;
var email = _("email").value;
var fatherName = _("fatherName").value;
var fatherNum = _("fatherNum").value;
var motherName = _("motherName").value;
var motherNum = _("motherNum").value;
var guardianName = _("guardianName").value;
var guardianNum = _("guardianNum").value;
var file = _("file").files[0];
var successStatus = _("successStatus");
var status = _("status");
var formData = new FormData();
formData.append("lrn", lrn);
formData.append("studentFname", studentFname);
formData.append("studentLname", studentLname);
formData.append("studentMname", studentMname);
formData.append("studentSname", studentSname);
formData.append("gender", gender);
formData.append("dob", dob);
formData.append("citizenship", citizenship);
formData.append("religion", religion);
formData.append("ethnicity", ethnicity);
formData.append("motherTongue", motherTongue);
formData.append("houseNum", houseNum);
formData.append("street", street);
formData.append("village", village);
formData.append("brgy", brgy);
formData.append("city", city);
formData.append("province", province);
formData.append("zip", zip);
formData.append("tel", tel);
formData.append("mobile", mobile);
formData.append("email", email);
formData.append("fatherName", fatherName);
formData.append("fatherNum", fatherNum);
formData.append("motherName", motherName);
formData.append("motherNum", motherNum);
formData.append("guardianName", guardianName);
formData.append("guardianNum", guardianNum);
formData.append("file", file);
if(lrn == "" || studentFname == "" || studentLname == "" || studentMname == "" || gender == "" || dob == "" || religion == "" ||
houseNum == "" || street == "" || brgy == "" || city == "" || province == "" || zip == "" || mobile == "" || email == "") {
status.innerHTML = "<p class='red statusMsg'><i class='fa fa-exclamation-triangle' aria-hidden='true'></i> Please fill out all required fields!</p>";
} else {
_('admissionBtn').disabled = true;
status.innerHTML = "<p class='statusMsg'><i class='fa fa-circle-o-notch fa-spin' aria-hidden='true'></i> Please wait...</p>";
var ajax = ajaxObj("POST", "inc/admission.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
if(ajax.responseText != 'success') {
status.innerHTML = ajax.responseText;
_('admissionBtn').disabled = false;
} else {
window.scrollTo(0, 0);
$('#studentAdmissionForm')[0].reset();
successStatus.innerHTML = "<div class='alert alert-dismissible alert-success'><button type='button' class='close' data-dismiss='alert'>×</button><h4 class='alert-heading'>Success!</h4><p class='mb-0'>Your data has been sent successfully!</p></div>";
}
}
}
ajax.send(formData);
}
}
这是我的PHP脚本：
function ajaxObj(method, url) {
var x = new XMLHttpRequest();
x.open(method, url, true);
x.setRequestHeader("Content-type","multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2));
return x;
}
function ajaxReturn(x) {
if(x.readyState == 4 && x.status == 200) {
return true;
}
}
答案 0 :(得分：1)
不要使用它：
x.setRequestHeader("Content-type","multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2));
XMLHttpRequest在表单元素之间使用自己的边界，它与随机边界不匹配。如果不这样做，会自动发送正确的标题。