Javascript AJAX提交表单并包含PHP文件

好的，我知道已经有很多关于使用AJAX提交表单/包括PHP文件的内容了，但是我对JavaScript是一个绝对的新手（在合理的范围内），所以我不得不发布一个问题

无论如何，我有一个下拉菜单的表单。提交表单时，它会创建一个GET变量，然后PHP使用该变量包含相对文件（这是一个白名单，因此不能伪造任何值）

我如何让JavaScript提交表单，然后在不需要刷新的情况下加载正确的PHP文件

以下是表格和代码：

表格：

                <div class="formC">
<form method="get" action="contents.php" id="myForm">
    <select name="TutorialBlock">
<option value="alltuts">Show All Tutorials</option>
<option value="tuts1">Block One - Starting</option>
<option value="tuts2">Block Two</option>
<option value="tuts3">Block Three</option>

</select>
    <input type="submit" value="Show Block" id="submitButtonId">
</form>
</div>

显示所有教程
第一区-启动
第二区
第三座

PHP：

 <?php
$whitelist = array(
'tuts1',
'tuts2',
'tuts3',
'alltuts'
);

if(isset($_GET['TutorialBlock']) && !empty($_GET['TutorialBlock'])) {
    // now make sure it's in the whitelist.
    if(!in_array($_GET['TutorialBlock'], $whitelist)) {
        die('<p class="info">The file does not exist, or isn not on the whitelist. Please choose from the dropdown menu</p>');
    } else {
        include 'includes/'.$_GET['TutorialBlock'].'.php';
    }
} else {
     echo '<p class="info">Choose your tutorial block using the drop down menu above</p>';
}
?>

---

我认为JQuery加载函数可以用更少的代码完成您想要的任务。

在此处输入代码
$（文档）.ready（函数（）{
$（“#下拉列表”）.change（函数（）{

$（'#output'）.load（'/contents.php'，{dropdown:$（this.val（）}）；
});
});
瞿
资历架构
质量控制
如果不想刷新，则需要使用AJAX而不是提交表单。阅读关于AJAX的教程，期望我们为您编写所有代码有点过分。主要是关于如何连接这两个部分。我大致知道如何提交表单和包含数据，但不是在您调用AJAX的同时，使用
$（“#tutorialDiv”）.html（response）
将响应插入页面。这实际上非常有用，谢谢
    $('#output').load('/contents.php',{dropdown: $(this).val()});

    });
});


<select id="dropdown" name="dropdown">
    <option value="QU">QU</option>
    <option value="QF">QF</option>
    <option value="QC">QC</option>
</select>