php – 从HTML调用Javascript函数

2019-06-13 20:16:52 阅读：125 来源： 互联网

标签：php javascript xmlhttprequest html

我有一个包含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函数将向每行具有唯一ID的PHP代码发送消息.在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行的表.当我单击“删除”按钮时,该行将被成功删除,然后会显示包含剩余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的代码不知道彼此存在.

解决方法:

在removeitem函数中,您将通过XMLHttpRequest对象覆盖removeitem.因此,后来的错误removeitem不是一个函数.

要解决此问题,可以使用var(推荐)前缀removeitem,或使用其他变量名称,或两者都使用.

推荐代码：

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

标签：php,javascript,xmlhttprequest,html
来源： https://codeday.me/bug/20190613/1235108.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

php – 从HTML调用Javascript函数