jQuery.ajax不是函数TypeError

时间：2018-05-25 11:32:35

标签： javascript jquery ajax

我不确定为什么我的代码会出错。我有什么问题？

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
      $( document ).ready(function() {
        var logResp = $('#food-hygiene');

        logResp.ajax({
                        url: "food-hygiene.html",
                        async: false,
                        type: "GET",
                        dataType: "string"
                    }).done( function(data) {
                        alert(data);
                    })
      });
    </script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="content-wrapper">
        <div id="food-hygiene">Loading...</div>
         </div>

        </div>
        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
      </body>
    </html>

更新：正如Satpal所指出的，有两个对jQuery的引用。较低版本是一个不支持jQuery的超薄版本。

4 个答案:

答案 0 :(得分：1)

logResp它包含您使用此语句选择的#food-hygiene元素的实例：$('#food-hygiene');。

替换此代码：

logResp.ajax({
                    url: "food-hygiene.html",
                    async: false,
                    type: "GET",
                    dataType: "string"
                }).done( function(data) {
                    alert(data);
                })

有了这个：

jQuery
    .ajax(
        {
            url: "food-hygiene.html",
            async: false,
            type: "GET",
            dataType: "string"
         }
    )
    .done(
        function(data) {
            alert(data);
        }
    );

答案 1 :(得分：1)

我有同样的问题。

只需替换：

'SRC = “https://code.jquery.com/jquery-3.1.1.slim.min.js”'

与

'SRC = “https://code.jquery.com/jquery-3.1.1.min.js”'

脚本标签中的

并将其添加到head tad

中

答案 2 :(得分：1)

似乎jQuery文件没有正确加载，我试过没有其他<link>标记，代码没有抛出任何错误：

同样$('#food-hygiene')没有ajax()放置$的方法。

＆＃13;
＆＃13; 
$(document).ready(function() {
  
  $.ajax({
    url: "food-hygiene.html",
    async: false,
    type: "GET",
    dataType: "string"
  }).done(function(data) {
    alert(data);
  })
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <!--<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>-->

</head>

<body>
  <div class="container-fluid">
    <div class="content-wrapper">
      <div id="food-hygiene">Loading...</div>
    </div>

  </div>
  <!-- jQuery first, then Tether, then Bootstrap JS. -->
  <!--<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

  1. 您正在创建一个对象并尝试将其用作ajax的前缀，这是错误的

  2. 只添加一个jQuery库jquery-3.2.1.min.js或jquery-3.1.1.slim.min.js

  3. 将脚本代码放在页面上并检查。 （或者你也可以留在那里）

    4. 如下所示： - 

    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="content-wrapper">
        <div id="food-hygiene">Loading...</div>
         </div>

        </div>
        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
         <script>
          $( document ).ready(function() {
            var logResp = $('#food-hygiene');

            logResp.ajax({
                            url: "food-hygiene.html",
                            async: false,
                            type: "GET",
                            dataType: "string"
                        }).done( function(data) {
                            alert(data);
                        })
          });
        </script>
      </body>
    </html>
相关问题
最新问题