单击链接时向服务器发送三重 HTTP 请求

Question

有人可以建议吗，我整周都在努力解决这个问题，但仍然没有运气。

我的问题是网络应用程序。当用户单击一个链接时，在单击特定链接后（其他链接工作正常），IE8 浏览器向服务器发送三个 HTTP 请求。它假设只发送一个请求。

第一个 HTTP 请求是 POST - Header 和 Body 数据正确（所有参数看起来都不错）

第二个 HTTP 请求是 POST - Header 和 Body 数据正确（所有参数看起来都不错）

第三个 HTTP 请求是 GET - Header 中没有 Referer，正文中没有任何内容（因为它是 GET）。

第三个请求导致 Servlet 抛出 NULL 指针异常，因为 Servlet 尝试读取 FORM 参数。

所有请求都发送到同一个 Servlet。 这三个请求在 1 - 2 秒内发生。我确定这与多次点击无关。

用户正在使用带有 Window XP 的 IE8。 这无法在我的环境中重现。

我在互联网上研究了一个星期，我注意到 IE8 的一个已知问题会创建对服务器的双重请求，这种情况似乎与 Javascript 中的“.submit()”有关。我已经非常详细地研究了我的代码，我相信事实并非如此。

这是链接的样子。请提出建议。

<a href=\"#\" onClick=\"test.goToNextPage();return false;\">Test link</a>


this.goToNextPage = function()
{
// do some paramter manipulation here (such as customer data),
    //not related to this issue
createForm().submit();

}

function createForm()
{

bcForm = document.createElement("form");
bcForm.setAttribute("method", "POST");

//real code add some hidden parameter(e.g. action, Form ID) and value here...

document.body.appendChild(bcForm);

return bcForm;
}

Answer 1

我遇到了同样的问题。这是关于 onclick 事件在嵌套 HTML 元素上的传播。例如：如果您在 中有一个 并且您只需点击 em> 然后执行两个 onclicks。

这种现象称为“事件冒泡”，您可以使用 JavaScript 修复这种情况。以下函数停止 onclick 事件的传播：

function crossbrowser_stopPropagation(e){
    if (!e) {
       e = window.event; 
    }

    e.cancelBubble = true;      

    if (e.stopPropagation) {
       e.stopPropagation(); 
    }       
}

现在，您必须在 onclick 中调用此函数，如下所示：

<a href="#" onClick="crossbrowser_stopPropagation(event);test.goToNextPage();return false;">Test link</a> 

如果您的 标签位于另一个实现 onclick 事件的 HTML 标签内，请记住在该标签中也使用此功能。

查看此链接了解更多信息：http://forums.mozillazine.org/viewtopic.php?f=38&t=549571

【讨论】：

• 您好 Chafi，感谢您对此进行调查并提供答案，这是非常有用的信息，示例非常好。但是，我只是使用 Firebug 来查看页面元素层次结构，不幸的是外部 HTML 元素上没有任何其他“onClick”:(
• 如果您将A标签替换为按钮标签（不是提交），您是否会遇到同样的问题？如果是这样，可能问题出在您的 JS 中。
• 这无法在我的环境中复制:(