动态AJAX提交按钮的代码在哪里？ 你如何构建一个动态的AJAX php / javascript网页？

Here is my Question:

I have a dynamic list that displays X classes. when a class is selected, all the students of the class are displayed. When a user clicks "submit", I want to send an insert statement to the database. Where does the code for the submit button go?

My Attempt: Pseudocode/structure

Files placed in 1 folder on webserver: Index.php and getStudentList.php

Index.php

<script>
function showStudents(str)
blabla
xmlhttp.open("GET","getStudentList.php?q="+str, true);
xmlhttp.send();
</script>
...
<div>
html display goes here, as well as the form itself
</div>

getStudentList.php

<script>
logic for javascript goes here which connects to a db and inserts attendance info
</script>
<?php
connect to db
query students in class
echo attendance form
?>

Detailed Code: Index.php

<!--start script for AJAX attendance display-->
<script>
function showStudents(str)
{
if (str=="") {
  document.getElementById("attendanceForm").innerHTML="";
  return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("attendanceForm").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getStudentList.php?q="+str,true);
xmlhttp.send();
}
<script>
<div>
    <?php
        //identify teacher's classes
        $school_connection = New school();
        $arrayTeachersClasses = $school_connection->queryTeachersClasses($_SESSION['teacherID']);
        //returns array of all classes taught
        //echoes today's date
        echo Date("l F d, Y");
        //create list so teacher can pick class
        echo "<form>";
        echo "<select name = \"courses\" onchange = \"showStudents(this.value)\">";
        echo "<option value=\"\">Select a class:</option>";
        $i = 0;//counter        
        while ($row = $arrayTeachersClasses[$i]) {
            echo "<option value=\"". $row[0] . "\">";
            echo $row[1] . "  ". $row[2] . "-L". $row[3] . " Room " . $row[4];
            echo "</option>";
            $i++;
        }
        echo "</select>";
        echo "</form>";


    /***
    //Sample "Select a Class" list
    <form>
    <select name="users" onchange="function(this.value)">
        <option value="">Select a class:</option>
        <option value="0">09:00:00  BEG-L1 Room303</option>
        <option value="1">TIME SUBJ-LEVEL ROOM</option>
        <option value="2">ditto</option>
        <option value="3">ditto</option>
    </select>
    </form>
    */

        $teacherID = $_SESSION['teacherID'];
        //echo $teacherID;


    ?>
</div>
<br />
<div id="attendanceForm">
    <p><b>Attendance List:</b></p>
    Please Select a Class
</div>

getStudentList.php

<script>
//Other JS stuff
$(document).ready(function() {

    //if submit button is clicked
    $('#submit').click(function () {        

    $i = 0;//counter
    var attendanceData = new Array();
    //Get the data for each student
    while ($row = $arrayStudentList[$i]) {
    var studentID = $('input[name=' . $row[0] . ']');
        if (studentID.val()=='') {
            studentID.addClass('highlight');
            return false;
        } else studentID.removeClass('highlight');

    $row[2] = studentID.val;
    $attendanceData[$i] = $row;
    $i++;
    }

    $row = $attendanceData[0];
    $record = $row[2];
    alert("My First JavaScript");

        //cancel the submit button default behaviours
        return false;
    }); 
}); 
</script>