Jquery

Question

我有一个简单的 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

谢谢

更新

查看 chrome 控制台的网络选项卡后，我可以看到两个请求，一个 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();
}

所以页面只返回 headers 预检 cors 检查，而不是运行代码。

Answer 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();
}

Jquery - php 事件发生两次

Jquery - php event happening twice

php

google-chrome