Jquery - php 事件发生两次答案

【问题标题】：Jquery - php event happening twiceJquery - php 事件发生两次
【发布时间】：2022-01-17 10:27:10
【问题描述】：

我有一个简单的 chrome 扩展，它使用 Jquery 并在我们本地网络上的页面上工作。当加载该页面时，jquery 会对单击一个名为#site 的元素做出反应，然后调用一个 php 页面。这在过去 6 个月内一直有效。

通常 test.php 页面运行一次，查看 error_log 我会看到一行调试输出。我最近将 test.php 移到了一个新服务器上，从那以后它似乎触发了两次。查看 apache2 error_log 我看到同一行调试输出两次。

这是我用来尝试弄清楚发生了什么的代码的简化版本。

$("body").on('click', '#site', function(e) {

    url = "https://192.168.0.1/test.php'
    console.log ( url )
    
    $.ajax({ type: "GET",   
    url: url,
    cache: false,
    success : function(text) {
        console.log (text)
        }
    });
})

为了测试，test.php 包含：

<?php 

$now = time();
error_log ( $now );
echo $now;
exit;

?>

当我点击#site 元素时，我在浏览器控制台中看到一行输出。这显示了调用的 URL 和来自 test.php 的结果时间戳

但是查看 apache2 error_log 我看到了两行输出。例如：

[Mon Jan 17 10:12:19.993783 2022] [php7:notice] [pid 17508] [client 192.168.0.1:5173] 1642414339
[Mon Jan 17 10:12:19.994898 2022] [php7:notice] [pid 17508] [client 192.168.0.1:5173] 1642414339

当我使用实时代码运行时，php 页面正在执行数据库插入，并导致添加两个条目。

我正在尝试找出为什么 php 页面似乎运行了两次。任何人都可以建议可能导致此问题的原因以及如何解决它。我已经检查过了，没有其他东西绑定到#sites

谢谢

更新

查看 chromes 控制台的网络选项卡后，我可以看到两个请求，一个是 Preflight，另一个是 xhr。

在我的 test.php 脚本中添加以下内容似乎已经解决了它。

$method = $_SERVER['REQUEST_METHOD'];
if ($method == "OPTIONS") {
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization");
    header("HTTP/1.1 200 OK");
    die();
}

因此该页面仅返回标头以进行预检 cors 检查，而不是运行代码。

【问题讨论】：

#site是什么html元素
事件是否被多次绑定？您可以通过检查绑定到 devtools 中 body 元素的事件来了解
@RiggsFolly 它是一个带有 id 站点的图像元素
如果该请求被发出两次，你应该检查一下网络标签
不客气 :) 很高兴它有帮助

标签： php jquery google-chrome

【解决方案1】：

按照@JohnSmith 的建议，我检查了网络选项卡以查看是否正在发送多个请求。

从中我可以看到两个条目，Preflight 和 xhr。 Google 指出了 Preflight 消息是什么，并将以下内容添加到我的 test.php 页面似乎已经解决了这个问题。

$method = $_SERVER['REQUEST_METHOD'];
if ($method == "OPTIONS") {
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization");
    header("HTTP/1.1 200 OK");
    die();
}

【讨论】：