表格在 div 中，在不同的 div 中显示结果

Question

我有一个 div 语句，里面有两个嵌套的 div。第一个嵌套 div 是一个表单，其中包含一个下拉菜单，允许用户选择基本的学校科目：

<form id="request" action="<?php echo $_SERVER['PHP_SELF']?> method="post">
        <div id='d2'>

            <p id='p2'>Subject: 
                <select id="s" name="subject">
                    <option value="English">English</option>
                    <option value="Social Studies">Social Studies</option>
                    <option value="Math">Math</option>
                    <option value="Science">Science</option>
                </select>
            </p>
            <input type="button" value="Find"/>

        </div>
</form>

第二个嵌套的 div 将使用 PHP 打印出一个先前初始化的可以帮助学生用户的导师数组，以及一个允许用户选择特定导师的链接。请原谅我的格式不太好，我还是个初学者：

<div id='div3'>
for ($i=0; $i<count($tutors); $i++)
{
      echo "<div>'".$tutors[$i]."'</div><br/>"
      . '<a href = "SelectedTutor.php">Choose me</a>' . "<br/>";
}
</div>

该数组在 php 类的最开始时通过连接到 MySQL 进行初始化，然后从数据库中提取导师用户和学生用户选择的主题的导师。再次，请原谅我的任何错误，我还在学习：

<?php 
if ($_SERVER['REQUEST_METHOD']=='POST')
{
    $sub = $_POST['subject'];

    $con = mysqli_connect("127.0.0.1", "root", "//removed", "mydb");
    $msg = "";
    if (mysqli_connect_errno())
    {
        $msg = "Failed to connect to MySQL: " . mysqli_connect_error();
        echo $msg;
    }    
    $query = mysqli_query($con, "SELECT * FROM User WHERE Role = tutor AND Subject ='".$sub."'");
    $tutors = array();
    while ($row = mysqli_fetch_assoc($query))
    {
        $tutors[] = $row["Username"];
    }
}
else
{
    echo "Failed form.";
}
?>

现在最困扰我的问题是失败的表单总是显示在屏幕上。我怀疑这是因为表单已嵌套在 div 中。有没有办法解决？还是其他问题？

我还想知道代码是否确实会在第二个嵌套 div 中显示我想要的内容，或者其中是否也存在错误（我稍后会设置样式）。

Answer 1

虽然您已经寻求 PHP/HTML 方面的帮助，但这确实是 jQuery/AJAX 的工作。不过不用担心 - 它比您想象的要简单得多。

使用 AJAX 的优点是您停留在同一页面上，并且页面不会刷新 - 但下拉选择会发送到 PHP 文件（您指定），查询 MySQL 数据库，并响应（在 HTML 中）被返回。

在 AJAX 成功函数中，（您听到了吗？在成功函数中！）您会收到另一个 PHP 文件返回的 HTML，然后将返回的 HTML 插入现有的 DIV。

这里有一些简单的例子：

AJAX request callback using jQuery

---

(1) 您不需要将 DIV d2 放入 <form> 标记中。 AJAX 不需要

(2) 您的 jQuery 代码如下所示：

<script type="text/javascript">
    $('#s').change(function(){
        var sub = $(this).val();
        $.ajax({
            type: 'post',
             url: 'my_php_file.php',
            data: 'subj=' +sub,
            success: function(resp){
                $('#div3').html(resp);
            }
        });
    });
</script>

上面的脚本可以放在文档的任何地方，或者放在head标签中，或者包含在单独的文档中。

(3) 您必须参考“AJAX 请求回调...”链接中的第一个示例中的 jQuery 库。

(4) 不需要Find 按钮，因为一旦更改下拉值，代码就会触发。与服务器通信并将导师列表粘贴到div3 div 中需要微秒。

(5) div3 div 必须已经存在于页面上（但可以为空）。

(6) PHP 文件（在上面的代码中称为my_php_file.php）与您编写的完全一样，只是它会创建一个包含要插入div3 div 的HTML 的输出变量。例如：

<?php 
    if ($_SERVER['REQUEST_METHOD']=='POST'){
        $sub = $_POST['subj'];

        $con = mysqli_connect("127.0.0.1", "root", "//removed", "mydb");
        $msg = "";
        if (mysqli_connect_errno()){
            $msg = "Failed to connect to MySQL: " . mysqli_connect_error();
            echo $msg;
        }    
        $query = mysqli_query($con, "SELECT * FROM User WHERE Role = tutor AND Subject ='".$sub."'");
        $tutors = array();
        while ($row = mysqli_fetch_assoc($query)) {
            $tutors[] = $row["Username"];
        }

        $out = '';
        for ($i=0; $i<count($tutors); $i++) {
              $out .= '<div>' .$tutors[$i]. '</div><br/>
                        <a href = "SelectedTutor.php">Choose me</a><br/>
                    ';
        }

    }else{
        $out = "Failed form.";
    }

    echo $out;
?>

以上所有代码都未经测试，但可以工作...

Answer 2

我正在基于我的解决方案。基于以下假设。根据您帖子中的这些内容。 第二个嵌套的 div 将使用 PHP 打印出一个先前初始化的可以帮助学生用户的导师数组，以及一个允许用户选择特定导师的链接。请原谅我不那么出色的格式，我还是个初学者：>>>>>> 这些行来自您的帖子。

请仔细阅读代码中的注释。在那里我解释了我的改变和建议。

这是代码

<!--

<form id="request" action="<?php //echo $_SERVER['PHP_SELF']?> method="post">-->       

    /*
  * The line above is wrong and as you may understand by the comments of other user, 
    you dont need to give anything in the action as you are posting it on the same 
  * page. so you can delete it. and add this line below one.
  */  

        <form action="" method="post">
            <div id='d2'>

            <p id='p2'>Subject: 
                <select id="s" name="subject">
                    <option value="English">English</option>
                    <option value="Social Studies">Social Studies</option>
                    <option value="Math">Math</option>
                    <option value="Science">Science</option>
                </select>
            </p>
            <!--<input type="button" value="Find"/>--->
            <input type="submit" value="Find"/>

        </div>
</form>

<div id='div3'>
    <?php 
//I am leaving these php tag for the reference only that you used it in your original code. 
//You dont need those lines

?>

</div>

<?php 
if ($_SERVER['REQUEST_METHOD']=='POST')
{

    $sub = $_POST['subject'];

    //$con = mysqli_connect("127.0.0.1", "root", "//removed", "mydb");
    $con = mysqli_connect("127.0.0.1", "root", "", "mydb");
    $msg = "";
    if (mysqli_connect_errno())
    {
        $msg = "Failed to connect to MySQL: " . mysqli_connect_error();
        echo $msg;
    }    
    $query = mysqli_query($con, "SELECT * FROM User WHERE Role = 'tutor' AND Subject ='".$sub."'")or die(mysqli_error($con));
   // $tutors = array(); You dont need that line either. 
    while ($row = mysqli_fetch_assoc($query))
    {
        $tutors = $row["username"];

      echo "<div>'".$tutors."'</div><br/>"
      . '<a href = "SelectedTutor.php">Choose me</a>' . "<br/>";





/*
 * **Here is the suggestion**. The link you are giving to 
 * the user is always going to be SelectedTutor.php. 
 * I dont think this what you want. you may want to 
 * show tutor profile or wanna do some thing else when
 *  somebody click on the link. Lets say you want show 
 * the tutor profile. Than you have to run another query. 
 * and should be able to generate link accordingly. 
 * I am giving you hint how you can do it in case you want to do it.
 */ 



 /*
     *  you should change that line to this line link one to this
     * echo "<div>'".$tutors."'</div><br/>"
     * . '<a href = "SelectedTutor.php?tutor='.$tutors.'">Choose me</a>' . "<br/>"; 
     * If you notcie i added this parth after SelectedTutor.php, this one ?tutor='.$tutors.'
     * Than your url will be different when ever user click on the link. 
     * Hope i did not confused you
     */

    }
}

else
{
    echo "Failed form.";
}
?>

你问为什么你会收到失败表单的消息。简而言之，为什么您的 else 语句正在运行。要了解请参阅下面的说明。

if ($_SERVER['REQUEST_METHOD']=='POST')
{
//I removed the code just left the basic shell so you can understand


}

else
{
    echo "Failed form.";

}

如果您阅读了上面的代码，您就会明白为什么每次运行代码时都会收到 Failed form 消息。单击提交时，您不会收到此消息。 原因：原因是这样的，在这些行中，您说如果 Request 方法是 post，则运行这段代码。和 Else 回显此消息。意味着每当您的请求方法未发布时，运行此 else 语句。

但问题是您仅在单击按钮后才发送发布请求。在此之前，没有发布请求。所以这就是为什么您每次运行脚本时都会收到此消息，而当您单击提交时它会消失。导致您发送发布请求。

如果我感到困惑，英语不是第一语言，请告诉我，我会再次解释。