AJAX 加载从 onclick 调用的 php 脚本时出现问题；

Question

我在 HTML、CSS、JavaScript 和 PHP 方面有相当深厚的背景。不幸的是，当谈到 jQuery 和 Ajax 时，至少可以说我有点不够资格。我在工作中做网页设计，但主要处理酒吧、夜总会（喜欢花哨而不是性能的人）。我最近找到了一份需要以上所有内容的工作，而且它有一个使用 PHP 的 mySQL 后端。

我有一个主页。在此页面上，它包含一个表格。该表格是可滚动的，这意味着页面本身只有大约 750 像素（正常屏幕大小），但表格可以根据需要滚动（从数据库中提取的信息）。最右边的一列包含2个按钮，1个是查看该列的详细信息。这个按钮重定向到另一个页面（输入类型=提交，PHP 处理重定向），很简单。然而，另一个按钮（输入类型=按钮）在单击时（假设这与项目 A 相关联）假设在同一页面上生成另一个表，该表处理基于项目 A 的子项目。同样起初这不是问题。简单的提交按钮和 PHP 检查提交按钮是否被按下。现在的问题是数据库中有太多项目，当用户单击按钮查看子项目时，页面会快速刷新，这会使第一个表（可能有 100 个项目长）刷新到顶部。我的主要目标是让 jQuery 或 Ajax 调用一个外部 PHP 脚本，该脚本将回显必要的代码，以便在当前 html 页面中“构建”另一个表，而不刷新顶部表。

这是我已经/尝试过的。

<script>

function callAjax() {
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.open("POST","test.php",true);
xmlhttp.send();

document.getElementById("divClass3").innerHTML=xmlhttp.responseText;
}


</script>

另外，我在 html 页面中的代码如下（请告知我曾经在我的 html 文件中包含“test.php”代码。这工作正常，目前我还没有根据我的我尝试的结果）：

<div id="divClass3">
<?php if (sizeof($rows2) > 0) echo'


    <table class="tableClass3">

        <colgroup>
            <col class="fifteenper" />
            <col class="fifteenper" />
            <col class="fifteenper" />
            <col class="fifteenper" />
            <col class="fifteenper" />
            <col class="fifteenper" />
            <col class="tenper" />            
        </colgroup>

        <tbody>
            <tr class="tableRowClass3">

                <th class="tableHeadingClass1">
                    heading1
                </th>

                <th class="tableHeadingClass1">
                    heading2
                </th>

                <th class="tableHeadingClass1">
                    heading3
                </th>

                <th class="tableHeadingClass1">
                    heading4
                </th>

                <th class="tableHeadingClass1">
                    heading5
                </th>

                <th class="tableHeadingClass1">
                    heading6
                </th>

                <th class="tableHeadingClass1">
                    heading7
                </th>    
            </tr>
        </tbody>
    </table>


<div class="divClass2">

    <table class="tableClass2">

        <colgroup>
            <col class="fifteenper" />
            <col class="fifteenper" />
            <col class="fifteenper" />
            <col class="fifteenper" />
            <col class="fifteenper" />
            <col class="fifteenper" />
            <col class="tenper" />         
        </colgroup>

        <tbody class="tableBodyClass2">
    '?> 

    <?php if (sizeof($rows2) > 0) {foreach($rows2 as $row2): ?>
            <tr class="tableRowClass2">

                <td class="tableDataClass2">
                    <form method="post"> <?php echo $row2['echo1']; ?> </form> 
                </td>

                <td class="tableDataClass2">
                    <form method="post"> <?php echo $row2['echo2']; ?>  </form>
                </td>

                <td class="tableDataClass2">
                    <form method="post"> <?php echo $row2['echo3']; ?>  </form> 
                </td>

                <td class="tableDataClass2">
                    <form method="post"> <?php echo $row2['echo4']; ?>  </form> 
                </td>

                <td class="tableDataClass2">
                    <form method="post"> <?php echo htmlentities($row2['echo5'], ENT_QUOTES, 'UTF-8'); ?> </form>
                </td>

                <td class="tableDataClass2">
                    <form method="post"> <?php echo htmlentities($row2['echo6'], ENT_QUOTES, 'UTF-8'); ?> </form>
                </td>

                <td class="tableDataClass2">
                    <form method="post"> 
                    <input name="View" type="submit" value="View" />
                    <input name="WorkID" type="hidden" value="<?php echo $row2['WorkID']; ?>" /> </form>
                </td>

            </tr>
        <?php endforeach;} ?>

    <?php if (sizeof($rows2) > 0) echo'
        </tbody>
        </table>
        </div>   
    '?>
        </div>

最后是 test.php

<?php


        $query2 = "
        SELECT 
            SOMETHING 
        FROM 
            TABLE1 
        INNER JOIN 
            TABLE2 
        ON 
            CAT1=CAT2
        AND
            CAT3 = :CAT4
        ";

        $query_params2 = array( 
            ':CAT4' => $_POST['BUTTON'] 
        );

        try 
        { 
            $stmt2 = $db->prepare($query2); 
            $stmt2->execute($query_params2);        
        }

        catch(PDOException $ex) 
        { 
            die("Failed to run query: " . $ex->getMessage()); 
        } 

        $rows2 = $stmt2->fetchAll();

?>

我提前感谢您提供的任何帮助。我只是发布这个，以便其他人也可以从中受益。我被困了几天没有任何用处。我见过类似的问题，但没有任何匹配的，所以我想我会试一试。非常感谢！

干杯

Answer 1

首先：您的脚本的问题是您尝试在调用 ajax 后立即设置 innerhtml。 Ajax 请求是异步的（除非您告诉它们不要这样做），因此它们将按自己的时间运行，并且您在调用之后放置的任何内容都可能在之前或之后执行。但基本上除非你告诉 ajax 调用是同步的（这会暂停脚本直到你得到响应），xmlhttp.responseText 还没有任何意义。在常规 javascript 中处理异步请求的方式是通过onreadystatechange 指定回调函数。例如

function myCallback()
{
   ...
}
xmlhttp.onreadystatechange=myCallback;
xmlhttp.send();

您也可以匿名使用xmlhttp.onreadystatechange = function() { ... };

无论哪种方式，对于异步调用，您都需要该回调。更具体地说，当readystate具体为200（成功返回）时，您需要处理回调，例如

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("divClass3").innerHTML=xmlhttp.responseText;
    }
};

另一个选项是让它同步，这会冻结你的javascript直到它被加载（通常不推荐这种方法）。您只需将 .open 语句更改为

xmlhttp.open("POST","test.php",false);

(最后一个参数决定调用是否异步(true=async; false=sync)

jQuery

这就是您在常规 javascript 中的做法，但既然您提到了它，我强烈建议您使用 jQuery，因为它会让您的生活更轻松。这是使用 jQuery 的整个 ajaxcall 函数：

function ajaxcall()
{
    $.post('test.php', function(response) {
        $('#divClass3').html(response);
    });
}

如果您对它的工作原理有任何疑问，请告诉我 :)