Question

我正在关注此tutorial。我想要做的就是让数据库中的表受到影响（插入，删除，更新）时，我的应用程序上的表将刷新，而不必点击 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的表代码我在数据库中回显来自同一个表的两个表但是有不同的视图（是null，IS NOT NULL）

<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，但由于某种原因，没有发生所需的影响。

任何帮助都会非常感谢你。

Answer 1

乍一看的主要问题似乎是你在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 作为您加载第二个的网址来自的表。

Jquery表重新加载插入

1 个答案: