php - 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 后立即设置 insidehtml。 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);
    });
}

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