Question

我正在尝试使用“提交”按钮调用API，但是在Chrome上检查页面时出现以下错误：

未捕获的ReferenceError：未定义CallApi

我的代码如下：

  <script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">



function CallApi(event)
{
  var username = "****"
  var password = "***"
  var engagamentId=$('#ctl00_ctl05_fvlc_Form1_txtEngagementID').val();
  if (engagamentId) 

    $.ajax({
      url: 'https://hello.com/engagements/engagementdetails/'+ $('#ctl00_ctl05_fvlc_Form1_txtEngagementID').val(),
      type: "GET",
      crossDomain: true,
      dataType: "jsonp",
      jsonp: "json_callback",
      headers: {
                "Authorization": "Basic " + btoa(username + ":" + password)"
                },
      success: function (data) {  
        $('#ctl00_ctl05_fvlc_Form1_txtEngagementID').val(data.EngagementID);
        $('#ctl00_ctl05_fvlc_Form1_txtClientName').val(data.ClientName);
        $('#ctl00_ctl05_fvlc_Form1_txtPOA').val(data.AccountingEndPeriod);
        $('#ctl00_ctl05_fvlc_Form1_txtCurrentTaxYear').val(data.TaxYear);
        $('#ctl00_ctl05_fvlc_Form1_txtEngagementManager').val(data.EngagementManager);

      },
      error:function(a,b,c)
      {
        alert(a.responseText);
        //alert("Engagement not found!");
      }

    });
  else alert("Please enter 'Engagement ID'");
}

我的按钮具有以下HTML：

<input type="button" value="Get Engagement Details" onclick="CallApi(event)" class="RadButton RadButton_Cora rbButton rbRounded rbIconButton">

有人可以告诉我我在做什么错吗？我查看了相关的问题/答案，但似乎无法正常工作。

谢谢！

Answer 1

该函数未定义，因此很可能未正确包含javascript文件。以防止出现此类错误：

使用src而不是href包含文件 <script src="myscripts.js"></script>
以正确的顺序包含文件（首先是jquery，然后是您的脚本）
了解术语“提升”在js中的含义
检查Chrome（网络）中的开发者工具以检查文件是否正确加载，或检查window.CallApi，因为应该全局定义它
如果您在html中定义脚本不透明，请仍然用脚本标签<script>function CallApi(event) {console.log(event);};</script>包裹它们

Answer 2

你们都试图导入JQuery并在同一脚本标签中编写自定义JS代码。

您必须在标签中包含JQuery。然后在另一个标记中声明您的自定义JS代码。

以这种方式进行操作（我只是出于演示目的而发出警报）：


<html>
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script type="text/javascript">
        function CallApi(event) {
            alert('test')
        }
    </script>
</head>

<body>
   <input type="button" value="Get Engagement Details" onclick="CallApi(event)" />
</body>
</html>

Answer 3

以下HTML文件对我有用，因为它可以调用您的API网址，并获取404，然后在错误回调中发出警报：

<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
  </script>
  <script>

    function CallApi(event)
    {
      var username = "****"
      var password = "***"
      var engagamentId=$('#ctl00_ctl05_fvlc_Form1_txtEngagementID').val();
      if (engagamentId) 

      $.ajax({
       url: 'https://hello.com/engagements/engagementdetails/'+ 
          $('#ctl00_ctl05_fvlc_Form1_txtEngagementID').val(),
       type: "GET",
       crossDomain: true,
       dataType: "jsonp",
       jsonp: "json_callback",
       headers: {
        "Authorization": "Basic " + btoa(username + ":" + password)
       },
        success: function (data) {  
          $('#ctl00_ctl05_fvlc_Form1_txtEngagementID').val(data.EngagementID);
          $('#ctl00_ctl05_fvlc_Form1_txtClientName').val(data.ClientName);
          $('#ctl00_ctl05_fvlc_Form1_txtPOA').val(data.AccountingEndPeriod);
          $('#ctl00_ctl05_fvlc_Form1_txtCurrentTaxYear').val(data.TaxYear);
          $('#ctl00_ctl05_fvlc_Form1_txtEngagementManager').val(data.EngagementManager);

       },
       error:function(a,b,c)
       {
         alert(a.responseText);
         //alert("Engagement not found!");
       }
     });
     else alert("Please enter 'Engagement ID'");
   }
 </script>
 <input type="button" value="Get Engagement Details" onclick="CallApi(event)" 
    class="RadButton RadButton_Cora rbButton rbRounded rbIconButton">
  <input type="text" id="ctl00_ctl05_fvlc_Form1_txtEngagementID" value="foo" />
</html>

Answer 4

它不起作用，因为在由浏览器创建DOM时，CallApi函数尚不存在。发生这种情况的原因是元素和脚本的加载顺序。我相信，如果您在<head>部分中插入脚本，则该功能应该可以正常工作。

我建议更改为以下内容：

$ (document) .ready (function () {
   $ ('#id-of-my-button-element').on('click', CallApi);
});

未捕获的ReferenceError：未定义CallApi

4 个答案: