过去几天我一直在寻找答案，但却找不到答案。在这一点上，我认为问题要么是AJAX的结果，要么是我的实际形式。无论哪种方式，任何帮助将不胜感激。
所以我使用的Ajax之前曾经使用过更简单的形式。出于这个原因，我简单地把它带过来并进行了调整。我改变的唯一事情是它将加载的ID名称和文件。话虽如此，它确实有效 - 在某种程度上。如果正在加载的文件包含文本或基本的echo语句，那么它将正常运行并在页面上按预期打印。
当我开始尝试让它设置变量而不是什么时，它就开始出现问题。它很简单吐出来＃Ajax无法运行＆＃34;。我已经尝试了各种方法来提取错误信息，但那些似乎也没有用。这里和那里可能会有一些小错误，因为我现在已经大大摆弄了一两天的代码。
HTML：
<!DOCTYPE html>
<?php session_start(); ?>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Standard Meta -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properties -->
<title>Apollo Project | Conjugate</title>
<link rel="stylesheet" type="text/css" href="/css/semantic.css">
<link rel="stylesheet" type="text/css" href="components/dropdown.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/components/dropdown.js"></script>
<script src="/scripts/semantic.js"></script>
<style type="text/css">
body {
background-color: #FFFFFF;
}
.ui.menu .item img.logo {
margin-right: 1.5em;
}
.main.container {
margin-top: 7em;
}
</style>
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<a href="http://semantic-ui.com/examples/fixed.html#" class="header item">
Apollo Project
</a>
<a href="http://semantic-ui.com/examples/fixed.html#" class="item">Home</a>
<div class="ui simple dropdown item">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="http://semantic-ui.com/examples/fixed.html#">Link Item</a>
<a class="item" href="http://semantic-ui.com/examples/fixed.html#">Link Item</a>
<div class="divider"></div>
<div class="header">Header Item</div>
<a class="item" href="http://semantic-ui.com/examples/fixed.html#">Link Item</a>
</div>
</div>
</div>
</div>
<div class="ui main text container">
<h3 class="ui center aligned header">Verb Conjugating</h3>
<div id="form-content">
<form method="post" action="" id="mainForm" >
<!-- Selector for Chapter -->
Chapter:
<select name="chapter" class="ui fluid search dropdown" id="chapter">
<option value="chAll">Any Chapter</option>
<option disabled role="separator">Select a chapter:</option>
<option value="ch1">Chapter 1</option>
<option value="ch2">Chapter 2</option>
<option value="ch3">Chapter 3</option>
<option value="ch4">Chapter 4</option>
<option value="ch5">Chapter 5</option>
<option value="ch6">Chapter 6</option>
<option value="ch7">Chapter 7</option>
<option value="ch8">Chapter 8</option>
<option value="ch9">Chapter 9</option>
<option value="ch10">Chapter 10</option>
<option value="ch11">Chapter 11</option>
<option value="ch12">Chapter 12</option>
<option value="ch13">Chapter 13</option>
<option value="ch14">Chapter 14</option>
<option value="ch15">Chapter 15</option>
<option value="ch16">Chapter 16</option>
<option value="ch17">Chapter 17</option>
<option value="ch18">Chapter 18</option>
<option value="ch19">Chapter 19</option>
<option value="ch20">Chapter 20</option>
<option value="ch21">Chapter 21</option>
<option value="ch22">Chapter 22</option>
<option value="ch23">Chapter 23</option>
<option value="ch24">Chapter 24</option>
<option value="ch25">Chapter 25</option>
<option value="ch26">Chapter 26</option>
<option value="ch27">Chapter 27</option>
<option value="ch28">Chapter 28</option>
<option value="ch29">Chapter 29</option>
<option value="ch30">Chapter 30</option>
<option value="ch31">Chapter 31</option>
<option value="ch32">Chapter 32</option>
<option value="ch33">Chapter 33</option>
<option value="ch34">Chapter 34</option>
<option value="ch35">Chapter 35</option>
</select>
<br>
<div class="ui two column doubling stackable grid">
<!-- Selectors for Voice, Tense, Conjugation, and Mood -->
<div class="column"> Voice:
<select name="voice" class="ui fluid search dropdown" id="voice">
<option value="vocAll">Any Voice</option>
<option disabled role="separator">Select a voice:</option>
<option value="usrAct">Active</option>
<option value="usrPas">Passive</option>
</select>
</div>
<div class="column"> Tense:
<select name="tense" class="ui fluid search dropdown" id="tense">
<option value="tenAll">Any Tense</option>
<option disabled role="separator">Select a tense:</option>
<option value="usrPres">Present</option>
<option value="usrImp">Imperfect</option>
<option value="usrPerf">Perfect</option>
<option value="usrPluPerf">PluPerfect</option>
<option value="usrFut">Future</option>
<option value="usrFutPerf">Future Perfect</option>
</select>
</div>
<div class="column"> Conjugation:
<select name="conj" class="ui fluid search dropdown" id="conj">
<option value="conjAll">Any Conjugation</option>
<option disabled role="separator">Select a conjugation:</option>
<option value="usr1st">1st</option>
<option value="usr2nd">2nd</option>
<option value="usr3rd">3rd</option>
<option value="usr4th">4th</option>
</select>
</div>
<div class="column"> Mood:
<select name="mood" class="ui fluid search dropdown" id="mood">
<option value="moodAll">Any Mood</option>
<option disabled role="separator">Select a mood:</option>
<option value="usrInd">Indicative</option>
<option value="usrInf">Infinitive</option>
<option value="usrImp">Imperative</option>
</select>
</div>
</div>
<br>
<input type="submit" class="ui fluid button" name="submitBtn">
</form>
</div>
<!-- HTML to submit Ajax to another page -->
<script type="text/javascript">
$(document).ready(function() {
// submit form using $.ajax() method
$('#mainForm').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'submitDecline.php',
type: 'POST',
data: $(this).serialize() // it will serialize the form data
})
.done(function(data){
$('#form-content').fadeOut('slow', function(){
$('#form-content').fadeIn('slow').html(data);
});
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
});
</script>
<!--
<h3 class="ui center aligned header">Doubling Stackable Grid</h3>
<div class="ui stackable grid">
</div>
<div class="ui two column doubling stackable grid">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
-->
</div>
<?php $conn->close();
?>
<script src="scripts/script.js"></script>
</body>
</html>
正在加载的PHP文件：
<p> This is a test </p>
<?php
session_start();
if( $_POST ){
$chaptSelect = $_POST['chapter'];
$tenseSelect = $_POST['tense'];
$voiseSelect = $_POST['voice'];
$moodSelect = $_POST['mood'];
$conjSelect = $_POST['conj'];
if( $chaptSelect == "Any Chapter" ) {
echo("You selected any chapter")
}
?>
<p> This is a test </p>