Question

我编写了一个AJAX脚本来从数据库中读取信息并将其作为HTML注入到.php文件中。它适用于IE8，Safari，Chrome，但不适用于Firefox。没有显示错误或任何错误，它根本就不执行。

以下是代码：

function queryDatabase(query)
{
    alert();
    var xmlhttp;
    if (window.XMLHttpRequest)
        {
        alert();
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
    else
        {
        alert();
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.onreadystatechange=function()
        {
        if(xmlhttp.readyState==4)
            {
            content.innerHTML = xmlhttp.responseText;
            }
        else
            {
            content.innerHTML = "<center><span style=\"color: #ff7e00; font-size: 30px;\">LOADING...</div></center>";
            }
        }
        xmlhttp.open("GET",query,true);
        xmlhttp.send(null);
}

（警报是出于测试目的，但没有一个出现在Firefox中）

这是它用于的div：

<div onClick="queryDatabase('latestquery.php')" style="cursor: pointer;">TEST</div> <div onClick="queryDatabase('testtagquery.php')" style="cursor: pointer;">TEST</div>

任何帮助表示赞赏:)
由于
萨姆

Answer 1

一开始你不能在Firefox中做alert() - 这个参数不是可选的。将其更改为alert(0)，看看会发生什么。

其次，我没有看到你设置content的位置 - 是否是你在某处初始化的全局变量？

您可以通过调出错误控制台（工具 - >错误控制台或Ctrl + Shift + J）来检查Firefox中的脚本错误。要提供更多帮助，请安装firebug。

修改：如果content只是您需要执行的元素的ID document.getElementById(content).innerHTML = ...;

Answer 2

我能给你的最好建议是开始使用一个为你实现AJAX功能的javascript框架，并使用它编写代码变得更加容易。

使用jQuery看起来像：

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
</script>
<script type="text/javascript">
 $(function() {
     $('#div1').click( function() {
         queryDb(this,'lastestquery.php');
     });

     $('#div2').click( function() {
         queryDb(this,'testtagquery.php');
     });
 });

 function queryDB(div,url) {
    $(div).load( url );
 }
</script>

<div id="div1" style="cursor: pointer;">TEST</div>
<div id="div2" style="cursor: pointer;">TEST</div>

请注意，我也可能也使用CSS类来分配光标。

<div id="div1" class="clickable">TEST</div>

通过CSS文件加载

.clickable {
    cursor: pointer;
}

Answer 3

编辑：这在它的表面上起作用，但现在看起来它不是真正的解决方案。

在设置状态更改功能之前，将上面的代码移到上面并移动xmlhttp.open调用。像这样：

xmlhttp.open("GET",query,true);
xmlhttp.onreadystatechange=function()
{
 if(xmlhttp.readyState==4)
 {
   content.innerHTML = xmlhttp.responseText;
 }
 else
 {
   content.innerHTML = "..";
 }
}
xmlhttp.send(null);

Answer 4

如果这有帮助，这是lastquery.php文件：

<?php
            $con = mysql_connect("localhost","root","***");
            mysql_select_db("main", $con);

            //GET MOST RECENT POST ID
            $last_id_query = mysql_query("SELECT * FROM articles");
            $last_id_result = mysql_fetch_array($last_id_query);
            $last_id = (int)$last_id_result['id'] - 2;

            //USE MOST RECENT POST ID TO GENERATE LAST 5 ARTICLES SUBMITTED
            $result = mysql_query("SELECT * FROM articles WHERE id > '$last_id' ORDER BY id DESC");

            while($row = mysql_fetch_array($result))
              {
              echo "<div id=\"centralcontent\"><div class=\"articleheading\"><strong>".$row['title']."</strong></div><div class=\"tag\">&nbsp; &nbsp; in ".$row['tag']."</div><div class=\"articleinfo\">".$row['date']."</div>";
              echo "<div class=\"articlecontent\">".$row['content']."</div></div>";
              }

            mysql_close($con);
            ?>

AJAX脚本无法在Firefox中运行

4 个答案: