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

阎宾实

2023-03-14

问题内容：

我有这个jQuery来响应被单击的按钮并调用REST方法：

$(document).ready(function() {
    $("#btnGetData").click(function() {
    alert("The button was clicked.");

    var unitval = _unit; 
    var begdateval = _beginDate;
    var enddateval = _endDate;

    var model = JSON.stringify({ unit: unitval, begdate: begdateval, enddate: enddateval });
    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetQuadrantData", "LandingPage")',
        data: { unit: unitval, begdate: begdateval, enddate: enddateval},
        contentType: 'application/json',
        cache: false,
        success: function (returneddata) {
        },
        error: function () {
            alert('hey, boo-boo!');
        }
        });

    }); // button click
}); // ready

不仅仅是不调用REST方法-此处理程序显然根本没有触发，因为我没有看到任何警报（“ 单击该按钮。 ”或“ 嘿，嘘！ ”）。

该脚本是被添加- I可以通过它步骤，和瓦尔（如“unitval”）被被分配相应的值。

那么，为什么要单击这样声明的按钮：

<button class="btn green smallbutton" id="btnGetData" name="btnGetData">SUBMIT</button>

…没做什么？

这是要添加的脚本（从“视图”>“页面源”）：

<script>$(document).ready(function() {$("#btnGetData").click(function() {alert("The button was clicked.");var unitval 
= ABUELOS;var begdateval = 2016-08-21;var enddateval = 2016-08-27;var model = JSON.stringify({ unit: unitval, begdate: 
begdateval, enddate: enddateval });$.ajax({type: 'GET',url: '@Url.Action("GetQuadrantData", "LandingPage")',data: { 
unit: unitval, begdate: begdateval, enddate: enddateval},contentType: 'application/json',cache: false,success: 
function (returneddata) {},error: function () {alert('hey, boo-boo!');}});});});</script>

这可能并不相关（无论如何），但这是我想从该按钮单击中调用的REST方法：

public class LandingPageController : ApiController
. . .
    [Route("{unit}/{begdate}/{enddate}")]
    public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
    {
        _unit = unit;
        _beginDate = begdate;
        _endDate = enddate;
        string beginningHtml = GetBeginningHTML(); // This could be called from any page to reuse the same "header"
        string top10ItemsPurchasedHtml = GetTop10ItemsPurchasedHTML();
        string pricingExceptionsHtml = GetPricingExceptionsHTML();
        string forecastedSpendHtml = GetForecastedSpendHTML();
        string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
        string endingHtml = GetEndingHTML();
        String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}",
            beginningHtml,
            top10ItemsPurchasedHtml,
            pricingExceptionsHtml,
            forecastedSpendHtml,
            deliveryPerformanceHtml,
            endingHtml);

        return new HttpResponseMessage()
        {
            Content = new StringContent(
                HtmlToDisplay,
                Encoding.UTF8,
                "text/html"
            )
        };
    }

更新

这是从控制台的错误转储：

Failed to find a valid digest in the 'integrity' attribute for resource 'https://code.jquery.com/jquery-1.12.4.min.js' with computed SHA-256 integrity 'ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ='. The resource has been blocked.

Uncaught Error: Bootstrap's JavaScript requires jQuery

Failed to load resource: the server responded with a status of 404 (Not Found)

Uncaught Error: Bootstrap's JavaScript requires jQuery

Uncaught ReferenceError: $ is not defined

Failed to load resource: the server responded with a status of 404 (Not Found)

更新2

我正在添加jQuery；我的“头部”部分中有以下内容：

<script src='https://code.jquery.com/jquery-1.12.4.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

更新3

在这里结合了一些建议，这是我的运行页面源（按钮仍然没有响应）：

<html style='margin-top:20;margin-left:60;margin-right:60; -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);padding-left: 1px;padding-right: 1px;padding-bottom: 15px;'><head><title>Available Reports for ABUELOS</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' /><script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script><link href="~/Content/Site.css" rel="stylesheet" /><![endif]--><style>body {padding-top: 20px;padding-bottom: 20px;background-color: white;}hr {border: 0;height: 1px;color: navy;background: #333;margin-left:-4;margin-right:-4;}table {font-family: arial, sans-serif;font-size: 13px;border-collapse: collapse;width: 100%;}td, th {border: 1px solid #dddddd;text-align: left;padding: 8px;}label { white-space: pre; }tr:nth-child(even) {background-color: #dddddd;}.body-content {-webkit-box-shadow: -1px 0 5px 0 #000000;-webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);box-shadow: -1px 0 5px 0 #000000;box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);padding-left: 1px;padding-right: 1px;padding-bottom: 15px;}.jumbotronjr {padding: 2px;margin-top: -12px;margin-bottom: -24px;font-size: 21px;font-weight: 200;color: inherit;background-color: white;}.titletext {font-size: 2.1em;color: darkgreen;font-family: Candara, Calibri, Cambria, serif;margin-left: -32px;}.titletextjr {font-size: 1.4em;color: darkgreen;font-family: Candara, Calibri, Cambria, serif;margin-left: -32px;}.cccsfont {font-size: 0.25em !important;font-family: Calibri, Candara, Cambria, serif !important;}.smalldatepicker {font-size: 12px;font-weight: 100;}.smallbutton {font-size: 11px;font-weight: 100;margin-left: 16;}.addltopmargin {margin-top: 8px;}.sectiontext {font-size: 1em;font-weight: bold;font-family: Candara, Calibri, Cambria, serif;color: green;margin-top: -4px;}.bottommarginbreathingroom {margin-bottom: 2px;}.submitbtnmargins  {margin-top: -4px !important;margin-left: 8px !important;margin-bottom: 8px;}.btn.green{background-color: darkgreen;color: white;}.redfont {color: red;}.bold {font-weight: bold;}.rightjustifytext {text-align: right;}.topleft {margin-top: -8px;margin-left: 12px;margin-bottom: 8px;padding: 16px;border:1px solid black;}.topright {margin-top: -8px;margin-right: 12px;margin-bottom: 8px;margin-left: -12px;padding: 16px;border:1px solid black;}.bottomleft {margin-left: 12px;padding: 16px;border:1px solid black;}.bottomright {margin-right: 12px;margin-left: -12px;padding: 16px;border:1px solid black;}.topright, .topleft {height: 408px; }.bottomright, .bottomleft {height: 408px; }.leftmargin12 {margin-left: 12px !important;}</style></head><body><div class="jumbotronjr"><div class="col-md-3" style="margin-top: 0.6cm"><img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" height="86" width="133" alt="PRO*ACT usa logo"></div><div class="col-md-9"><label class="titletext" style="margin-top: 0.2cm;">Customer Dashboard</label><br/><label class='titletextjr' style='margin-top: -2.2cm;'>ABUELOS</label><label> for the week of August 21          </label><input class="smalldatepicker" type="date" id="datepicker" name="daterangefrom" value="2016-08-21"></input><label> to </label><input type="date" class="smalldatepicker" id="datepicker" name="daterangeto" value="2016-08-27"></input><button type="button" class="btn green smallbutton" id="btnGetData" name="btnGetData">GO</button></div><div class="row"><div class="col-md-12"><hr /></div></div><div class="row"><div class="col-md-12"></div></div><div class="row"><div class="col-md-6"><div class="topleft"><h2 class="sectiontext">Top 10 Items Purchased</h2><table><tr><th>Item Code</th><th>Description</th><th class="rightjustifytext">Qty</th></tr><tr><td>156100</td><td>ONIONS, YELLOW JUMBO 50#</td><td class="rightjustifytext">362</td></tr><tr><td>226150</td><td>AVOCADOS, ABUELOS-HASS 70CT  23#</td><td class="rightjustifytext">358</td></tr><tr><td>163150</td><td>PEPPERS, ANAHEIM GREEN 20#</td><td class="rightjustifytext">282</td></tr><tr><td>176000</td><td>POTATOES, RED A 50#</td><td class="rightjustifytext">266</td></tr><tr><td>188301</td><td>TOMATOES, ROMA HOT HOUSE 25#</td><td class="rightjustifytext">230</td></tr><tr><td>167150</td><td>PEPPERS, POBLANO 18 - 20#</td><td class="rightjustifytext">202</td></tr><tr><td>189300</td><td>TOMATILLOS, 30# NO HUSK</td><td class="rightjustifytext">168</td></tr><tr><td>170150</td><td>PEPPERS, GRN CH 1&1/9 BU (18-26#)</td><td class="rightjustifytext">163</td></tr><tr><td>122500</td><td>LETTUCE, ICEBERG LINER 24 CT</td><td class="rightjustifytext">133</td></tr><tr><td>127100</td><td>LETTUCE, ROMAINE 24 CT </td><td class="rightjustifytext">129</td></tr></table></div></div><div class="col-md-6"><div class="topright"><h2 class="sectiontext">Pricing Exceptions - Weekly Recap</h2><label class="redfont" style="font-size: 12px">Red denotes Contract Item Overages</label></br><label style="font-size: 12px">For Weyand on the pricing week of - 7/31/2016</label><table><tr><th>PRO*ACT Member</th><th class="rightjustifytext">Total Occurrences of Summary Items</th><th class="rightjustifytext">Total Summary Exceptions</th><th class="rightjustifytext">Total Percentage of Summary Exceptions</th></tr><tr><td style="width:30%">Stern</td><td style="width:23%" class="rightjustifytext">205</td><td style="width:23%" class="rightjustifytext">2</td><td style="width:24%" class="rightjustifytext">99.02%</td></tr><tr><td>Hardies Dallas</td><td class="rightjustifytext">1,597</td><td class="rightjustifytext">0</td><td class="rightjustifytext">100.00%</td></tr><tr><td>Hardies South</td><td class="rightjustifytext">612</td><td class="rightjustifytext">1</td><td class="rightjustifytext">99.84%</td></tr><tr><td>Go Fresh</td><td class="rightjustifytext">482</td><td class="rightjustifytext">0</td><td class="rightjustifytext">100.00%</td></tr><tr><td>Segovias</td><td class="rightjustifytext">1,360</td><td class="rightjustifytext">2</td><td class="rightjustifytext">99.85%</td></tr><tr><td>Potato Spec</td><td class="rightjustifytext">1,605</td><td class="rightjustifytext">0</td><td class="rightjustifytext">100.00%</td></tr><tr><td class="rightjustifytext bold">TOTAL</td><td class="rightjustifytext bold">5,861</td><td class="rightjustifytext bold">5</td><td class="rightjustifytext bold">99.79%</td></tr></table></div></div></div><div class="row"><div class="col-md-6"><div class="bottomleft"><h2 class="sectiontext">Forecasted Spend - $9,814.81</h2><table><tr><th>Item Code</th><th class="rightjustifytext">Last Week's Usage</th><th class="rightjustifytext">This Week's Price</th><th class="rightjustifytext">Forecasted Spend</th></tr><tr><td>261650</td><td class="rightjustifytext">49</td><td class="rightjustifytext">3.14</td><td class="rightjustifytext">153.86</td></tr><tr><td>231083</td><td class="rightjustifytext">52</td><td class="rightjustifytext">1.25</td><td class="rightjustifytext">65.00</td></tr><tr><td>398980</td><td class="rightjustifytext">46</td><td class="rightjustifytext">4.95</td><td class="rightjustifytext">227.70</td></tr><tr><td>351135</td><td class="rightjustifytext">40</td><td class="rightjustifytext">0.75</td><td class="rightjustifytext">30.00</td></tr><tr><td>398036</td><td class="rightjustifytext">42</td><td class="rightjustifytext">3.00</td><td class="rightjustifytext">126.00</td></tr><tr><td>208110</td><td class="rightjustifytext">42</td><td class="rightjustifytext">2.50</td><td class="rightjustifytext">105.00</td></tr><tr><td>102800</td><td class="rightjustifytext">1835</td><td class="rightjustifytext">2.25</td><td class="rightjustifytext">4,128.75</td></tr><tr><td>367050</td><td class="rightjustifytext">1910</td><td class="rightjustifytext">1.95</td><td class="rightjustifytext">3,724.50</td></tr><tr><td>173100</td><td class="rightjustifytext">66</td><td class="rightjustifytext">19.00</td><td class="rightjustifytext">1,254.00</td></tr><tr><td class="bold">TOTAL</td><td class="bold rightjustifytext">4082</td><td class="bold rightjustifytext">--</td><td class="bold rightjustifytext">$9,814.81</td></tr></table></div></div><div class="col-md-6"><div class="bottomright"><h2 class="sectiontext">Delivery Performance</h2><table><tr><th>PRO*ACT Distributor</th><th>Restaurant Location</th><th class="rightjustifytext">Avg Order Amount</th><th class="rightjustifytext">Avg Package Count</th><th class="rightjustifytext">Total Sales</th></tr><tr><td>Sunrise FL</td><td>A1A ALEWORKS - #4405 - ST. AUGUSTINE</td><td class="rightjustifytext">$475.78</td><td class="rightjustifytext">28.50</td><td class="rightjustifytext">$1,903.10</td></tr><tr><td>Sunrise FL</td><td>RAGTIME TAVERN - #4404 - ATLANTIC BEACH</td><td class="rightjustifytext">$221.46</td><td class="rightjustifytext">17.50</td><td class="rightjustifytext">$885.82</td></tr><tr><td>Sunrise FL</td><td>SEVEN BRIDGES - #4403 - JACKSONVILLE</td><td class="rightjustifytext">$367.49</td><td class="rightjustifytext">22.67</td><td class="rightjustifytext">$1,102.47</td></tr><tr><td>T&T</td><td>BIG RIVER - #4201 - CHATTANOOGA</td><td class="rightjustifytext">$396.06</td><td class="rightjustifytext">22.83</td><td class="rightjustifytext">$2,376.34</td></tr><tr><td>T&T</td><td>BIG RIVER - #4205 - HAMILTON PL</td><td class="rightjustifytext">$424.74</td><td class="rightjustifytext">26.00</td><td class="rightjustifytext">$1,698.95</td></tr><tr><td class="bold">TOTAL</td><td></td><td class="bold rightjustifytext">3,770.42</td><td class="bold rightjustifytext">23.50</td><td class="bold rightjustifytext">$1,592.60</td></tr></table></div></div></div></div><script>window.onload = function(){var btnGetData = document.getElementById('btnGetData');btnGetData.addEventListener("click", function () {alert("Twerking...");var unitval = ABUELOS;var begdateval = 2016-08-21;var enddateval = 2016-08-27;var model = JSON.stringify({ unit: unitval, begdate: begdateval, enddate: enddateval });$.ajax({type: 'GET',url: '@Url.Action("GetQuadrantData", "LandingPage")',data: { unit: unitval, begdate: begdateval, enddate: enddateval},contentType: 'application/json',cache: false,success: function (returneddata) {},error: function () {alert('hey, boo-boo!');}});});</script></div></body></html>

更新4

只是为了尝试验证问题是我正在使用C＃动态创建html（和javascript），所以将脚本添加到了Index.cshtml文件（这是初始页面，并且在运行时未修改）：

. . .
</style>
    <script>
        $(function () {
            var btnGetData = document.getElementById('btnGetData');
            btnGetData.addEventListener("click", function () {
                alert("It works");
                var unitval = 'Abuelos';
                var begdateval = '2016-08-07';
                var enddateval = '2016-08-13';

                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("GetQuadrantData", "LandingPage")',
                    data: { unit: unitval, begdate: begdateval, enddate: enddateval },
                    contentType: 'application/json',
                    cache: false,
                    success: function (returneddata) {
                    },
                    error: function () {
                        alert('hey, boo-boo!');
                    }
                });
            });
        });

    </script>
</head>
. . .

这是 LandingPageController中 的方法：我正在尝试使用该AJAX调用的 ApiController 类：

[Route("{unit}/{begdate}/{enddate}")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
    _unit = unit;
    . . .

这样做时，我的确看到“有效”警报，然后看到“嘿，嘘！”。同样，从javascript按钮单击事件处理程序。“ unit = unit;”上的断点
永远不会到达。我认为，这就是为什么我看到“ boo-boo”消息的原因，但我不知道 _为什么
它没有得到实现。

更新5

Url.Action args仍然被错误地转换/翻译；在Chrome开发工具中显示：

<script>
    $(document).ready(function () {
        $("#btnGetData").click(function () {
            $.ajax({
                type: 'GET',
                url: '/LandingPage/GetQuadrantData',
                console.log(url);
                data: {unit: unitval, begdate: begdateval, enddate: enddateval},
                contentType: 'text/plain',
                cache: false,
                xhrFields: {
                    withCredentials: false
                },
                success: function(returneddata) {
                    alert('Successful: ' + returneddata);
                },
                error: function() {
                    alert('hey, boo-boo!');
                }
            }); // ajax
        }); // button click
    }); // ready
</script>

…所以这：

url: '@Url.Action("GetQuadrantData", "LandingPage")',

…在CDT中被视为：

url: '/LandingPage/GetQuadrantData',

…并且我还没有到达下面最后一行设置的断点：

[System.Web.Http.Route("{unit}/{begdate}/{enddate}")]
[System.Web.Http.HttpGet]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
    _unit = unit;

更新6

它在ajax调用的中间跳越了这条线：

console.log(url);

…但是即使我将其剥离以使jQuery成为这个（向args / data添加一些随机数据值）：

$(document).ready(function () {
    $("#btnGetData").click(function () {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetQuadrantData", "LandingPage")',
            data: {unit: 'ABUELOS', begdate: '2016-08-25', enddate: '2016-08-31'},
            contentType: 'text/plain',
            cache: false,
            xhrFields: {
                withCredentials: false
            },
            success: function(returneddata) {
                console.log('Successful: ' + returneddata);
            },
            error: function() {
                console.log('hey, boo-boo!');
            }
        }); // ajax
    }); // button click
}); // ready

…我仍然将“ boo-boo”消息写入控制台，并且未击中控制器中的断点，大概是因为通过Url.Action（）方法生成了错误的url。

更新7

如果我kludgily /实验性地将ajax调用更改为此，则用原始URL替换Url.Action和数据：

$(document).ready(function () {
    $("#btnGetData").click(function () {
        $.ajax({
            type: 'GET',
            url: 'http://localhost:52194/api/ABUELOS/2016-08-21/2016-08-27',
            contentType: 'text/plain',
            cache: false,
            xhrFields: {
                withCredentials: false
            },
            success: function(returneddata) {
                console.log('Successful: ' + returneddata);
            },
            error: function() {
                console.log('hey, boo-boo!');
            }
        }); // ajax
    }); // button click
}); // ready

.. 我的确 到达了Controller中的断点，但是页面上的url不变，并且页面上的数据（html）也没有更新。

顺便说一句，正如nyedidikeke所建议的，我确实将jquery引用更改为此：

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

更新8

这样（将javascript引用移到底部““ BTW上方）之后：

. . .
</style>
    <script>
    $(document).ready(function () {
        $("#btnGetData").click(function () {
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetQuadrantData", "LandingPage")',
                data: { unit: 'ABUELOS', begdate: '2016-08-25', enddate: '2016-08-31' },
                contentType: 'text/plain',
                cache: false,
                xhrFields: {
                    withCredentials: false
                },
                success: function(returneddata) {
                    console.log('Successful: ' + returneddata);
                },
                error: function() {
                    console.log('hey, boo-boo!');
                }
            }); // ajax
        }); // button click
    }); // ready
    </script>
</head>
. . .

…我在Chrome开发工具的控制台中获得了此信息：

http://localhost:52194/LandingPage/GetQuadrantData?unit=ABUELOS&begdate=2016-08-25&enddate=2016-08-31&_=1473095349071 Failed to load resource: the server responded with a status of 404 (Not Found)

hey, boo-boo!

更新9

这是我在\ App_Start \ WebApiConfig.cs中的Register方法：

public static void Register(HttpConfiguration config)
{
    config.Routes.Clear(); // added this 9/2/2016 at suggestion from http://www.codemag.com/article/1601031
    config.SuppressDefaultHostAuthentication();
    config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

    // Web API routes
    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
    );

    // I don't know if this is where this should go (from http://stackoverflow.com/questions/34626483/how-to-pass-datatable-via-frombody-to-web-api-post-method-c)
    config.Formatters.Add(new DataTableMediaTypeFormatter());
    config.Formatters.Add(new GenericProduceUsageListMediaTypeFormatter());
}

这里有什么问题吗？

问题答案：

为了成功达到按钮上的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://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
    crossorigin="anonymous"></script>

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

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

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

<script src="https://code.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）文件时，请记住遵循以下优先顺序：

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

注意：您的JS 引用最好应该位于body标记（</body>）关闭之前的页面内容的末尾。

一旦应用了上述修复程序，您就可以成功进入控制台：The button was clicked.单击按钮（请参阅下面的代码段）。

您的按钮：

<button class="btn btn-success btn-sm" 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库。这占既不 The button 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!');
    }
});

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

更新

更新2

更新3

更新4

更新5

更新6

更新7

更新8

更新9

相关阅读

相关文章

相关问答

相关工具

相关文档