0

我正在关注本教程。我要做的是拥有它，以便当数据库中的表受到影响（插入、删除、更新）时，我的应用程序上的表将刷新，而无需点击F5或刷新按钮。我按照教程到了发球台，但没有运气。什么都没发生。如果有人可以查看我的代码并查看是否有任何问题，我将不胜感激？

<head>
    <link href="core/styles/secondary.css" rel="stylesheet" type="text/css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $.ajaxsetup({
            cache: false
        })
        var ajax_load = "<img class='loading' src='core/images/load.gif' alt='Loading...'/>

        var loadURL="inoffice.php";
            $("#start_que").click(function(){
                $("#que").html(ajax_load).load(loadURL);
            });
     </script>

这是 inoffice.php 的表代码我正在从数据库中的同一个表中回显两个表但具有不同的视图（为空，不为空）

<body id="que">
<?php
echo "Waiting";
echo 
    "<table border='2'>
    <tr>
    <th>ID</th>
    <th>A Number</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Why</th>
    <th>Student Comments</th>
    <th>Additional Requirements</th>
    <th>Signintime</th>
    <th>Staff Member</th>
    <th>Click if ready!</th>
    </tr>"
    ;

    foreach($result as $row)
    {
  echo "<tr>";
  echo "<td>" . $row['id'] . "</td>";
  echo "<td> <a href=student.php?anum=" . $row['anum'] . " target='_blank'>" .$row['anum'] . " </a></td>";
  echo "<td>" . $row['first'] . "</td>";
  echo "<td>" . $row['last'] . "</td>";
  echo "<td>" . $row['why'] . "</td>";  
  echo "<td>" . $row['comments'] . "</td>";
  echo "<td>" . $row['additional_req'] . "</td>";
  echo "<td>" . $row['signintime'] . "</td>";
  echo "
        <td>    <form action='counselor.php?id=" . $row['id'] . "' method='post' target='_new'>
                    <select name='namedrop'>
                        <option value=''>Counselor Name</option> 
                        <option value=''></option>
                        <option value=''><option>
                        <option value=''></option>
                        <option value=''></option>
                        <option value=''></option>
                        <option value=''></option>
                        <option value=''></option>
                        <option value=''></option>
                    </select>
            </td>

            <td> <input type='submit' name='submit' value='Start Session' id='start_que'></td>
            </form> </td>";
}

名为 Session Start 且 ID 为 start_que 的按钮是提交按钮。一旦按下该按钮，第二个表就会被填充。第二个表的代码：

echo 
    "<table border='2'>
    <tr>
    <th>ID</th>
    <th>A Number</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Why</th>
    <th>Student Comments</th>
    <th>Signintime</th>
    <th>Staff Member</th>
    <th>Counselor Start Time</th>
    </tr>"
    ;

    foreach($result2 as $row2)
    {
  echo "<tr>";
  echo "<td>" . $row2['id'] . "</td>";
  echo "<td><a href=student.php?anum=" . $row2['anum'] . " target='_blank'>" .$row2['anum'] . " </a></td>";
  echo "<td>" . $row2['first'] . "</td>";
  echo "<td>" . $row2['last'] . "</td>";
  echo "<td>" . $row2['why'] . "</td>"; 
  echo "<td>" . $row2['comments'] . "</td>";
  echo "<td>" . $row2['signintime'] . "</td>";
  echo "<td>" . $row2['counselorname'] . "</td>";
  echo "<td>" . $row2['counselor_start_time'] . "</td>";
}

echo "</tr>";
echo "</table>";

根据我的理解，从上面发布的教程中，一旦我单击带有 start_que 的按钮，那么第一个表会显示一个更少的字段，然后第二个表会加载一个新的 DOM，但由于某种原因，所需的影响没有发生。

任何帮助都会非常感谢。

4

1 回答 1

0

乍一看，主要问题似乎是您试图在 dom 呈现之前附加 dom 事件处理程序。将您的所有代码包装在内部$(document).ready()当 dom 准备好时将调用此函数，然后可以附加您的事件处理程序。

除此之外，您错过了一些引号和分号，函数名称应该ajaxSetup是ajaxsetup

<script type="text/javascript">
    $(function () {
        $.ajaxSetup({
            cache: false
        });

        var ajax_load = "<img class='loading' src='core/images/load.gif' alt='Loading...' />";

        var loadURL = "inoffice.php";

        $("#start_que").click(function () {
            $("#que").html(ajax_load).load(loadURL);
        });
    });
</script>

编辑：在您的解释中，您说第一个表来自inoffice.php，但您的代码将inoffice.php列为您从中加载第二个表的 url。

于 2013-01-12T23:14:43.220 回答