使用AJAX将PHP表单提交到MYSQL数据库

我有一个

PHP

页面，在表中显示来自

MYSQL

数据库的记录。我希望能够通过单击单元格来编辑表格单元格中的记录。我拍摄的过程如下所示：

1）

onclick（）

表单元格上的事件触发器

ajaxfunction（）

2）

ajaxfunction（）

将单元格数据发送到php页面，该页面查询数据库并显示选项下拉列表。
3） 用户从下拉列表中选择选项
4）

onchange（）

事件将表单提交到数据库
5） 刷新表格单元格或页面以显示当前表格单元格数据。（当前不在我的现有代码中）

现在我有两个

PHP

页面

ac_sched.PHP

和

ModSched.PHP

以下是每页的结构：

ac_sched.php:

<script>
function ACSchedQuery(reg)
    {
    if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
    xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById(reg).innerHTML=xmlhttp.responseText;
            }
        }
    xmlhttp.open("GET","../process/ModSched.php?ModSched_Reg="+reg,true);
    xmlhttp.send();
    }
</script>

<table>

<tr>
<td id="ABC-Day-3" onclick="ACSchedQuery(this.id)"></td>
</tr>

......rest of table here......
</table>


ModSched.php:

// This is to request the options from the database  
if(isset($_GET['ModSched_Reg']))
    {
    $ModSched_Array = explode("-",$_GET["ModSched_Reg"]);
    $ModSched_Reg = $ModSched_Array[0];
    $ModSched_Day = $ModSched_Array[1];
    $ModSched_ID = $ModSched_Array[2];

    $sql4 = ("SELECT * FROM aircraft_sched_options WHERE SchedOpt_ID != 0");

    if(!$result_sql4 = $mysqli->query($sql4))
        {
        echo QueryCheck("getting the schedule options ","from the aircraft sched options",$mysqli);
        }
    ?>
    <form action="../process/ModSched.php" method="post">// I did try: action=""
        <table cellpadding="0" cellspacing="0" border="0">

        <tr>
        <td>
    <?php
    echo "<select name=\"ModSched_ID\">";

    while($SchedOpt = $result_sql4->fetch_assoc())
        {
        echo "<option value=\"" . $ModSched_Reg . "-" . $ModSched_Day .  "-" . $SchedOpt['SchedOpt_ID'] . "\" onchange=\"formSubmit(this.form)\"";
        if($SchedOpt['SchedOpt_ID'] == $ModSched_ID)
            {
            echo " selected=\"selected\"";
            }
        echo ">" . $SchedOpt['SchedOpt_Name'] . "</option>";
        }

    echo "</select>";
    ?>
        </td>
        </tr>

        </table>
    </form>
    <?php
    }  

// This is to submit the selected option to the database
if(isset($_POST['ModSched_ID']))
    {
    $ModSched_Array = explode("-",$_POST["ModSched_ID"]);
    $ModSched_Reg = $ModSched_Array[0];
    $ModSched_Day = $ModSched_Array[1];
    $ModSched_ID = $ModSched_Array[1];

    $sql4 = ("UPDATE aircraft_status SET $ModSched_Day = $ModSched_ID WHERE AC_Reg = $ModSched_Reg");

    if(!$result_sql4 = $mysqli->query($sql4))
        {
        echo QueryCheck("updating the aircraft schedule ","into the aircraft sched",$mysqli);
        }

    }

ac_sched.php

：

• PHP

  创建的表显示

  MYSQL

  记录

• ajaxfunction

  查询数据库中可用的单元格选项

ModSched.php

：

• PHP

  code从数据库中选择可用单元格选项并创建下拉列表

• PHP

  code使用下拉列表中选择的选项更新数据库

以下是每页代码的相关部分：

ac_sched.php:

<script>
function ACSchedQuery(reg)
    {
    if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
    xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById(reg).innerHTML=xmlhttp.responseText;
            }
        }
    xmlhttp.open("GET","../process/ModSched.php?ModSched_Reg="+reg,true);
    xmlhttp.send();
    }
</script>

<table>

<tr>
<td id="ABC-Day-3" onclick="ACSchedQuery(this.id)"></td>
</tr>

......rest of table here......
</table>


ModSched.php:

// This is to request the options from the database  
if(isset($_GET['ModSched_Reg']))
    {
    $ModSched_Array = explode("-",$_GET["ModSched_Reg"]);
    $ModSched_Reg = $ModSched_Array[0];
    $ModSched_Day = $ModSched_Array[1];
    $ModSched_ID = $ModSched_Array[2];

    $sql4 = ("SELECT * FROM aircraft_sched_options WHERE SchedOpt_ID != 0");

    if(!$result_sql4 = $mysqli->query($sql4))
        {
        echo QueryCheck("getting the schedule options ","from the aircraft sched options",$mysqli);
        }
    ?>
    <form action="../process/ModSched.php" method="post">// I did try: action=""
        <table cellpadding="0" cellspacing="0" border="0">

        <tr>
        <td>
    <?php
    echo "<select name=\"ModSched_ID\">";

    while($SchedOpt = $result_sql4->fetch_assoc())
        {
        echo "<option value=\"" . $ModSched_Reg . "-" . $ModSched_Day .  "-" . $SchedOpt['SchedOpt_ID'] . "\" onchange=\"formSubmit(this.form)\"";
        if($SchedOpt['SchedOpt_ID'] == $ModSched_ID)
            {
            echo " selected=\"selected\"";
            }
        echo ">" . $SchedOpt['SchedOpt_Name'] . "</option>";
        }

    echo "</select>";
    ?>
        </td>
        </tr>

        </table>
    </form>
    <?php
    }  

// This is to submit the selected option to the database
if(isset($_POST['ModSched_ID']))
    {
    $ModSched_Array = explode("-",$_POST["ModSched_ID"]);
    $ModSched_Reg = $ModSched_Array[0];
    $ModSched_Day = $ModSched_Array[1];
    $ModSched_ID = $ModSched_Array[1];

    $sql4 = ("UPDATE aircraft_status SET $ModSched_Day = $ModSched_ID WHERE AC_Reg = $ModSched_Reg");

    if(!$result_sql4 = $mysqli->query($sql4))
        {
        echo QueryCheck("updating the aircraft schedule ","into the aircraft sched",$mysqli);
        }

    }

ac_sched.php:
函数ACSchedQuery（reg）
{
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（reg）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”，”./process/ModSched.php？ModSched_Reg=“+Reg，true）；
xmlhttp.send（）；
}
……这张桌子的其余部分。。。。。。
ModSched.php：
//这是从数据库请求选项
如果（isset（$\u GET['ModSched\u Reg']））
{
$ModSched_数组=explode（“-”，$u GET[“ModSched_Reg]”）；
$ModSched_Reg=$ModSched_数组[0]；
$ModSched_Day=$ModSched_数组[1]；
$ModSched_ID=$ModSched_数组[2]；
$sql4=（“从飞机计划选项中选择*，其中计划ID！=0”）；
if（！$result\u sql4=$mysqli->query（$sql4））
{
echo QueryCheck（“获取计划选项”，“来自飞机计划选项”，$mysqli）；
}
?>
//我确实尝试过：action=“”
您可以实现一些框架，如或，此框架可以帮助您学习此语言和良好实践。
您是否考虑过使用jqGrid或DrasticTools之类的库？您应该确定jquery@Barmar不，我从来没听说过。@Barmar看起来jqGrid做了一些我想做的事情。你做了吗将其用于类似的应用程序？是的，我使用过。我也使用过DrasticGrid，但它没有那么多功能。我听说过一些关于这些框架的知识，但我从未使用过它们。它们能帮助我应对这种情况吗？也许是时候冒险了。