Ajax 调用/javascript - 在 IE、Firefox 和 Safari 上运行良好，但在 Chrome 上却不行答案

【问题标题】：Ajax call/javascript - working fine on IE, Firefox and Safari but not on ChromeAjax 调用/javascript - 在 IE、Firefox 和 Safari 上运行良好，但在 Chrome 上却不行
【发布时间】：2020-03-02 18:51:55
【问题描述】：

当用户选择 BEGINNER 和 00-Intro to Programming - 并输入任何用户名两次（并按下提交）时，我在网站上有以下页面可以正常工作

http://www.teachyourselfpython.com/testandtrack_v5/index.php

注意：它在 IE、Firefrox、GoogleChromeBETA 和 Safari 上运行良好。但是，它在 Chrome 上不起作用 - 产生错误“您必须输入测验密码”。没有为此特定测验设置测验密码（在数据库中，该字段设置为“0”，所以我不知道为什么它首先会启动此命令。请注意，一个控制台错误表明该站点应该是 HTTPS 并且 Chrome 似乎不喜欢隐藏密码字段（只有在测验有密码时才会显示测验密码的输入框）

一个建议是它与 AJAX 和 Javascript 有关。下面贴一些相关代码。

       $("#quiz_form").change(function () {
           /* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */
           var allbooks = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
           var dataString = "level=" + allbooks; /* STORE THAT TO A DATA STRING */

           $.ajax({ /* THEN THE AJAX CALL */
   type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
   url: "get-quiz-by-level.php", /* PAGE WHERE WE WILL PASS THE DATA */
   dataType: "json",
   data: dataString, /* THE DATA WE WILL BE PASSING */
   success: function success(result) {

       /* GET THE TO BE RETURNED DATA */
       var option = "";
       result
           .sort(function(a, b) {
               return a.quiz_name.localeCompare(b.quiz_name);
           })
           .forEach(function (quiz, i) {
               option += "<option value=\"" + quiz.id + "\">" + quiz.quiz_name + "</option>";
               if (i == 0 && quiz.password_quiz != 0) {
                   $("#password").show();
               } else if (i == 0 && quiz.password_quiz == 0) {
                   $("#password").hide();
               }
           });
       $("#got_quiz").show().html(option);
   }
});
       });
       $("#got_quiz").change(function () {
           /* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */
           var allbooks = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
           var dataString = "quiz=" + allbooks; /* STORE THAT TO A DATA STRING */
           $.ajax({ /* THEN THE AJAX CALL */
               type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
               url: "check_quiz_pass.php", /* PAGE WHERE WE WILL PASS THE DATA */
               data: dataString, /* THE DATA WE WILL BE PASSING */
               success: function success(result) {
                   /* GET THE TO BE RETURNED DATA */
                   if (result == 0) {
                       $("#password").hide();
                   } else {
                       $("#password").show();
                   }
               }
           });
       });

另一个建议是它与 PHP 有关。（粘贴在下面）我将 ifelse 更改为 if else，但这没有任何区别 - 它仍然适用于 IE/Safari/Firefox 而不是 Chrome。

PHP 代码

 //getting body i.e. questions, options and submit button for the page

 //initialize the optput variable
    $m_output='';

 //Getting the questions from DB here
    $m_questions_from_DB = mysqli_query($con,"SELECT * FROM questions WHERE quiz_id='$final_quiz_ID'
                                ");

        while (mysqli_num_rows($m_questions_from_DB)<1) {
            $user_msg = 'Hey, weird, but it seems there are no questions in this quiz!';
            header('location: index.php?user_msg='.$user_msg.'');
            exit();
        }
        if($_POST['consent'] != 1){
            $user_msg = 'Hey, You have to consent first to begin the quiz!';
            header('location: index.php?user_msg='.$user_msg.'');
            exit();
        }else if(($_POST['class_name'] == "non" && !empty($_POST['school_pin'])) || ($_POST['class_name'] != "non" && empty($_POST['school_pin']))){
            if($_POST['class_name'] == "non"){ echo "aakakakak"; }
            $user_msg = 'Hey, You have to insert correct school pin and choose your class'.$_POST['school_pin'].$_POST['class_name'];
            header('location: index.php?user_msg='.$user_msg.'');
            exit();
        }elseif($quiz_pass != '0' && empty($_POST['quiz_password'])){
            $user_msg = 'Hey, Enter a correct Quiz password';
            header('location: index.php?user_msg='.$user_msg.'');
            exit();
        }elseif(!empty($_POST['quiz_password']) && $_POST['quiz_password'] != $quiz_pass){
            $user_msg = 'Hey, Enter a correct Quiz password';
            header('location: index.php?user_msg='.$user_msg.'');
            exit();
        }

我尝试过/看过的其他内容：

-我看到 SO 帖子表明 Response.Close() 需要被注释掉，但我的任何页面上都没有。

-其他建议提到了 Chrome 不能很好地处理异步调用这一事实 - 这些是什么以及我会在我的代码中在哪里进行更改？

-另一篇文章提到 Chrome 无法很好地处理 jsonp（请注意，上周它在 Chrome 上运行良好，但突然间，在没有干扰的情况下，它停止了工作）。同样，我找不到对 jsonp 的任何引用，所以假设不是这样。

我还尝试在调用 datatype:json 之后添加以下 async:false 以查看它是否像下面那样工作

   dataType: "json",
   async:false,

这也没用

最后要尝试的是完全删除或注释掉 dataType:"json"，但没有运气。

** 控制台中的非常有趣的错误日志**

另一个特点是，在 CHROME 的浏览器中运行控制台开发者工具错误日志（它不起作用）时，没有错误！！

但是，在 CHROME BETA 中运行 console 错误日志（它工作正常），错误是：

qYZF6oIZtfc:1 解析标头 X-XSS-Protection 时出错：1；模式=块； report=https://www.google.com/appserve/security-bugs/log/youtube：报告 URL 与第 22 位字符的页面的方案、主机和端口不同。将应用默认保护。

：报告 URL 与第 22 位字符的页面的方案、主机和端口不同。将应用默认保护。

quiz.php:1 此页面包含非安全上下文中的密码或信用卡输入。 URL 栏中已添加警告。有关详细信息，请参阅...

我想知道 no.2 是否与它有关！但我不知道如何继续。

重要更新

https://developers.google.com/web/updates/2016/10/avoid-not-secure-warn

我发现这个网站无疑进一步阐明了这个问题，但是如何继续修复错误？

最后，这篇文章表明箱子的加载有问题。

One approach (not working in Chrome)

<select>
   <optgroup label="Swedish Cars">
       <option id="volvo" onclick="option_click(this.id)">Volvo</option>
       <option id="saab" onclick="option_click(this.id)">Saab</option>
   </optgroup>
DEMO.

Proper way (Working in all browsers)

<select onchange="option_click(this.value)">
    <optgroup label="Swedish Cars">
        <option value="volvo" id="volvo">Volvo</option>
        <option value="saab" id="saab">Saab</option>
    </optgroup>
</select>

几乎......更新！ 在一个有用的建议将#password（ajax）更改为其他东西以防它是保留字之后，我尝试了......它似乎可以暂时在我的chrome版本中工作，但在移动设备上仍然存在相同的错误！我后来刷新了，然后它也停止在加载的 Chrome 版本上工作了！

另外，另一个人告诉我它在 chrome 上适用于他（即使没有 ajax 保留字更改），但他的 chrome 有一个添加阻止程序，所以这可能是进一步的线索。

David J（谢谢）建议这可能是保护网站的问题，因此这可以通过 cloudflare 进行选择。

有什么想法吗？非常感激。

【问题讨论】：

检查你的 chrome 是否激活了 Javascript，或者更新你的浏览器
已经查过了，答案是肯定的。
您可能使用了 chrome 的保留关键字，导致您的 ajax 请求不起作用，请尝试使用 fetch 或 axios
有趣的 Abdeslem - 您能否具体建议我更改为 fetch 或 axios .... 目前尚不清楚您在推荐什么。另外，请注意，它在 Chrome 中运行了好几个星期……但在最后一两天突然坏了！（没有任何变化）
jquery 是一种癌症，如果你刚开始使用它尽量避免它，Axios 是一个执行 ajax 请求的库github.com/axios/axios 你可以使用它来代替 jquery ajax，它兼容所有浏览器

标签： javascript php ajax google-chrome secure-context

【解决方案1】：

我在这里也有类似的问题。

Jquery Mobile +php form submit "data-ajax="false" not working

解决办法：

页面中有多个具有相同 id 的 div。我重写了它们。
表单没有自己的 ID，所以我添加了。
我在表单元素中添加了 data-ajax="false"。
(!!!) 我从表单元素中删除了 action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"

希望对你有帮助

【讨论】：