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

Question

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>

Answer 1

there are many ways of doing this... Below are 2 simple solutions: with postback or through ajax.

Options 1 - Postback

1. when submit is clicked submit the form to the index page itself: leave form action blank or use $_SERVER['PHP_SELF']
2. in index.php prior to displaying anything check request type & params and save data
3. generate success/failure message and display

Option 2 - Ajax

1. create new page insertStudent.php
2. Add ajax functionality to form submit and send form to insertStudent.php. see jquery submit or reinvent the wheel for your project
3. In insertStudent.php save the student and return json status or (1/0)
4. handle the response in your ajax handler (step 2) to display success/failure message

Hoe this helps you with your homework ;-)