的jQuery

Question

我在HTML，CSS，JavaScript和PHP方面有相当强的背景。不幸的是，当涉及到jQuery和Ajax时，我有点资格说至少。我在工作中做网页设计，但主要处理酒吧，夜总会（喜欢表现优异的人）。我最近进入了一项需要以上所有工作的工作，而且它有一个使用PHP的mySQL后端。

我有一个主页。在这个页面上它包含一个表。该表是可滚动的，意味着页面本身只有大约750px（正常的屏幕大小），但是表可以根据需要滚动（从数据库中提取的信息）。最右边的列包含2个按钮，1用于查看该列的详细信息。此按钮重定向到另一个页面（输入类型=提交，PHP处理重定向），很简单。然后单击另一个按钮（输入类型=按钮）（假设这与项目A相关联）假设在同一页面上生成另一个表格，该表格根据项目A处理子项目。再次，这不是一个问题。简单的提交按钮和PHP检查是否按下了提交按钮。现在的问题是，DB中有如此多的项目，当用户点击按钮查看子项时，页面会快速刷新，这使得第一个表（可能是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指定回调函数。 E.g。

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);
    });
}

如果您对此工作原理有任何疑问，请与我们联系：）

AJAX加载php脚本的问题，从onclick调用;

1 个答案:

的jQuery