Javascript / PHP更新多个项目的innerHTML

时间:2012-06-15 00:21:13

标签: php javascript ajax

我正在尝试使用Javascript在onclick事件后更新网页的innerHTML。我的Javascript(java.js)使用this code来访问一个PHP页面,该页面回显了innerHTML中的文本。问题是,我想更新两个项目(“颜色”表和“项目”表)的innerHTML,它们不是彼此相邻并且具有不同的元素ID。来自java.js的每次调用都可以单独工作(如果有一个被注释掉),但是当它们都运行时,无论哪一个都将被卡在“加载”消息上,第二个将起作用。在网络浏览器中加载“content.php?item ='5'& color ='5'”会显示两个表格。

我怀疑这与$ _GET []的机制有关(我不完全理解;这是我第一次使用PHP)。但是调用应该按顺序进行,键('item'和'color')不会发生冲突,所以我无法弄清楚出了什么问题。

java.js:

function makeActive(active_tab) {
    //item table
    callAHAH('content.php?item='+active_tab, 'item', 'getting items for tab '+active_tab+'. Wait...', 'Error');

    //color table
    callAHAH('content.php?color='+active_tab, 'color', 'getting colors for tab '+active_tab+'. Wait...', 'Error');
}

content.php:

if (isset($_GET['color'])) {
    require 'color.php';

    $index = 1*$_GET['color'];
    $arr = $ITEM_TYPES[$index];
    echoColorTable($arr); //makes table in color.php
} else {
    echo "color not set "; //debug
}

if (isset($_GET['item'])) {
    require 'item.php';

    $index = 1*$_GET['item'];
    echoItemTable($index); //makes table in item.php
} else {
    echo "item not set "; //debug
}

1 个答案:

答案 0 :(得分:1)

问题在于您链接到的callAHAH功能。它声明var时没有req关键字。所以它是一个全局变量,一次只能有一个请求。它还在responseAHAH函数中重用该全局变量。一般来说,由于这样的原因,全局变量是个坏主意。我建议完全抛弃callAHAH函数并使用类似这样的东西来完成同样的事情而不使用全局变量:

function loadInto(url, id, loading, error) {
    var ajax;
    var el = document.getElementById(id);
    el.innerHTML = loading;

    if (typeof XMLHttpRequest !== 'undefined')
        ajax = new XMLHttpRequest();
    else // Some people still support IE 6
        ajax = new ActiveXObject("Microsoft.XMLHTTP");

    ajax.onreadystatechange = function(){
        if(ajax.readyState === 4){
            if(ajax.status == 200){
                el.innerHTML = ajax.responseText;
            }else{
                el.innerHTML = error;
            }
        }
    };

    ajax.open('GET', url);
    ajax.send();
}

它也没有命名为callAHAH,而且总是一个加号。