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

我在一个网站上有一个页面，当用户选择初学者和00编程入门，并输入任意用户名两次（然后按submit）时，该页面运行良好

注意：它在IE、Firefrox、Google Chromebeta和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();
                   }
               }
           });
       });

这也没用

最后要尝试的是删除或注释掉数据类型：“json”，但没有运气

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

另一个特点是，在浏览器中运行console developer tools的CHROME错误日志（如果它不工作）时，没有错误

但是，在CHROME BETA中运行console错误日志（运行良好），错误如下：

1. qYZF6oIZtfc:1解析标头X-XSS-Protection:1时出错；模式=块；报告=：报告URL与字符位置22处的页面的方案、主机和端口不同。将应用默认保护

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

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

我不知道2号是否与此有关！但我不知道如何继续

重要更新

我发现这个网站无疑对这个问题有了进一步的了解，但是如何继续修复错误呢

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

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>

一种方法（不适用于Chrome）
沃尔沃汽车
萨博
演示。
正确的方式（适用于所有浏览器）
沃尔沃汽车
萨博

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

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

David J（谢谢）建议这可能是一个保护站点的问题，因此这可能是通过cloudflare的一个选项

---

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

我这里有一个类似的问题

解决方案：

页面中有几个具有相同id的div。我重写了它们

表单没有自己的ID，所以我添加了

我向表单元素添加了数据ajax=“false”

（！！！）我从表单元素中删除了action=“

”

---

我希望它有助于检查您的chrome中是否激活了Javascript，或者更新已检查的浏览器，答案是肯定的。您可能正在使用chrome的保留关键字，这就是为什么ajax请求无法工作的原因，请尝试使用fetch或axiosInteresting Abdeslem-您能具体建议我如何更改fetch或axio吗s…不清楚您推荐的是什么。另外，请注意，它在Chrome中工作了好几个星期……在最后一两天突然坏了！（没有任何变化）如果您刚刚开始使用Jquery并试图避免它，那么Jquery就是一个癌症。Axios是一个执行ajax请求的库，您可以使用它来代替jqueryajax，并且它与所有浏览器兼容

   dataType: "json",
   async:false,

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>