php - 从 HTML 调用 Javascript 函数

Question

我有一个包含 5 行(比方说)的 HTML 表格，该表格显示在网页上。表格的第一列是 RowID(每一行都是唯一的)，每一行的最后一列是一个 [X] 按钮(点击它会删除排)。整个表在 <div> 中 元素与 id="cartmain"

<div id="cartmain">
     <table>
          <tr>
            <td>....</td>
            <td>....</td>
            <td> <a href="#" onclick="removeitem('id1')"> [X] </a> </td>
          </tr>
          ..
          ..
     </table>
</div>

这就是我删除行的方式:

第 1 步: 当用户点击 [X] 按钮时，XMLHTTPRequest 函数将向 PHP 代码发送消息，其中包含每行的唯一 ID。在 PHP 代码删除行期间，DIV 元素显示“正在加载...”

document.getElementById("cartmain").innerHTML = "Loading..."

第 2 步:PHP 代码将从表(和数据库)中删除行并返回剩余的表。

<?php
     //removing row from database/table...

     //send the remaining table back to the XMLHTTPRequest function...
     echo "<table>";
     echo "<tr><td>...</td>
               <td>...</td>
               <td> <a href=\"#\" onclick=\"removeitem('id1')\"> [X] </a> </td>";
     echo "</tr>";
     ...
     ...
     ...
     echo "</table>";
?>

然后使用以下行在 DIV 元素中显示从 PHP 代码接收的剩余表格:

document.getElementById("cartmain").innerHTML = removeitem.responseText;

我的问题:假设我有 5 行的表。当我点击 Remove 按钮时，该行被成功删除，然后表格显示为剩余 4 行。问题来了:当我想从表中删除另一行时:什么都没有发生。换句话说，如果我再次点击某行的[X]，什么也不会发生。不调用 XMLHTTPRequest 函数。在理想情况下，它应该使用该唯一的 RowID 再次调用 XMLHTTPRequest 函数，然后应该显示剩余 3 行的表。

重要说明:当我刷新页面时，我可以删除另一行。但这一次，我也只能删除一行。要再删除一个，我必须再次刷新页面。

有人能找出这里的问题吗？请帮忙。

注意:我的表实际上是一个购物车，每行包含一个产品。 [X] 按钮实际上表示从购物车中“删除项目”。

这是 JavaScript 代码:

function removeitem(itemid)
{
    alert("The item to be removed is: "+itemid);
    if(window.XMLHttpRequest)
    {
        removeitem = new XMLHttpRequest();
    }
    else
    {
        removeitem=new ActiveXObject("Microsoft.XMLHTTP");
    }

    removeitem.onreadystatechange=function()
    {
        if (removeitem.readyState==4 && removeitem.status==200)
        {
            document.getElementById("cartmain").innerHTML=removeitem.responseText;
        }
        else if(removeitem.readyState < 4)
        {
            document.getElementById("cartmain").innerHTML="Loading...";
        }
    }
    var linktoexecute = "cart.php?option=5&itemid="+itemid; //option =5 signifies that I want to remove the item with ITEMID.
    removeitem.open("GET",linktoexecute,true);
    removeitem.send();
}

函数 removeitem 第一次显示警告“要删除的项目是:123”，但第二次不显示。当我检查 Firebug 控制台时，第二次出现以下错误:

removeitem 不是函数

请帮忙!!

我所有的 Javascript 函数都在我使用的单独文件 (sc.js) 中 <script type="text/javascript" src="js/sc.js"></script>在HEAD我页面的标签。

我的观点:所以最后我认为问题变成了一个简单的问题:如果网页使用 XMLHTTPRequest 从 PHP 页面请求一些 HTML —— 如果该 HTML(由 PHP 发送)包含一些调用 Javascript 的按钮功能——那么在这种情况下会发生什么[？]。现在，由于我能够第一次删除该行，所以我认为说上述情况不起作用是错误的。只是当我第二次单击按钮时，来自 PHP 的代码和已经加载的 Javascript 并不知道彼此的存在。

Answer 1

在 removeitem 函数中，您将通过 XMLHttpRequest 对象覆盖 removeitem。因此后面的错误removeitem is not a function。

要解决此问题，请在 removeitem 前加上 var(推荐)，或使用另一个变量名，或两者兼而有之。

推荐代码:

function removeitem(itemid) {
    alert("The item to be removed is: "+itemid);
    var removeitem = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    removeitem.onreadystatechange = function() {
        if (removeitem.readyState == 4 && removeitem.status == 200) {
            document.getElementById("cartmain").innerHTML = removeitem.responseText;
        } else if(removeitem.readyState < 4) {
            document.getElementById("cartmain").innerHTML="Loading...";
        }
    }
    var linktoexecute = "cart.php?option=5&itemid="+itemid; //option =5 signifies that I want to remove the item with ITEMID.
    removeitem.open("GET", linktoexecute, true);
    removeitem.send();
}

在 removeitem 之前添加 var 解决了这个问题，因为变量是本地定义的。当省略 var 时，新值将附加到最近的父声明(在本例中为函数)。

var removeitem = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

上一行是以下内容的缩写:

var removeitem;
if (window.XMLHttpRequest) {
    removeitem = new XMLHttpRequest();
} else {
    removeitem = new ActiveXObject("Microsoft.XMLHTTP");
}