为什么我的jQuery按钮处理程序没有被解雇？

为什么我的jQuery按钮处理程序没有被解雇？

为了成功达到按钮上的click事件，首先需要解决控制台中报告的问题（主要是资源

'integrity'

错误）。

让我们首先解决Subresource Integrity错误：

在jQuery文件位置使用 openssl 打开命令行，然后运行：

猫 FILENAME.js | openssl dgst -sha384 -binary | openssl enc -base64 -A

其中，FILENAME.js是您的jQuery文件的名称（在您的情况下为jquery.min.js。）

要么

利用SRI哈希生成器（通过提供所需的内容交付网络（CDN）脚本的URL并单击“ 哈希”
按钮）来生成子资源完整性（SRI）哈希。

因此，您的预期输出应为：

<script src="https://pre.jquery.com/jquery-1.12.4.min.js"    integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"    crossorigin="anonymous"></script>

注意：完整性属性使浏览器可以检查并确保如果引用的资源文件的内容与生成SRI哈希时的内容不同，则不会加载该资源。

然后，您应该考虑通过在服务器上托管jQuery文件的副本来进行正常的故障转移，以备您所引用的CDN版本的内容已更改时使用。

这样做检查是否已定义jQuery，如果尚未定义，请参考您的故障转移。

<script src="https://pre.jquery.com/jquery-1.12.4.min.js"    integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"    crossorigin="anonymous"></script><script>window.jQuery || document.write('<script src="path/to/jquery-1.12.4.min.js"></script>')</script>

在引用您的Javascript（JS）文件时，请记住遵循以下优先顺序：

1. jQuery库，
2. 引导JS文件，然后
3. 您的自定义JS文件，应该有。

注意：您的JS 引用 最好应该位于body标记（

</body>

）关闭之前的页面内容的末尾。

一旦应用了上述修复程序，您就可以成功进入控制台：

The button was clicked.

单击按钮（请参阅下面的代码段）。

您的按钮：

<button  id="btnGetData" name="btnGetData">SUBMIT</button>

您的脚本：

<!-- jQuery approach -->$(document).ready(function() {    $("#btnGetData").click(function() {        console.log("The button was clicked.");    }); // button click}); // ready<!-- or --><!-- Pure Javascript approach -->window.onload = function() {    var btnGetData = document.getElementById('btnGetData');    btnGetData.addEventListener("click", function () {        console.log("The button was clicked.");    }); // button click}; // ready

jQuery和纯Javascript方法现在都可以工作，并且可以在要使用的外部资源（jQuery库）上进行完整性测试时，使您触按一下按钮，并且可以使用故障转移选项进行进一步 *** 作。

注意：jQuery方法失败，因为未声明jQuery库是因为您的SRI检查失败，并且没有可用的故障转移来仍然加载jQuery库。 这占既不

Thebutton was clicked.

也没有

hey, boo-boo!

成功地达到了无论是在按钮点击事件，或者通过单击事件，您的jQuery
AJAX误差函数。

进一步，请

contentType: 'text/plain'

在jQuery AJAX调用中使用，而不是

contentType:'application/json'

因为期望 纯HTML 而不是 JSON响应， 并

withCredentials:false

在

xhrFields

声明中将其设置为附加属性（除非服务器必须以标头响应）（请参见下面的代码段）。

xhrFields: {    withCredentials: false},

综上所述：

$.ajax({    type: 'GET',    url: '@Url.Action("GetQuadrantData", "LandingPage")',    // Should you face any escape character challenge, use 'url' with @Html.Raw()    //url: '@Html.Raw(@Url.Action("GetQuadrantData", "LandingPage"))',    console.log(url);    data: {unit: unitval, begdate: begdateval, enddate: enddateval},    contentType: 'text/plain',    cache: false,    xhrFields: {        withCredentials: false    },    success: function(returneddata) {        console.log('Successful: ' + returneddata);    },    error: function() {        console.log('hey, boo-boo!');    }});