【已解决】js调用ajax去get请求服务器接口出错：Uncaught TypeError: $.ajax is not a function

折腾：

【已解决】Bootstrap的css中如何用js去提交http的get请求调用服务器的REST API

期间，代码：

html

<code>
    &lt;form&gt;
      &lt;div class="form-group input_request"&gt;
        &lt;input type="text" class="form-control" id="inputRequest" placeholder="请输入您要说的话"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;button id="submit" type="submit" class="btn btn-primary btn-lg col-sm-3"&gt;提交&lt;/button&gt;
        &lt;button class="btn btn-secondary btn-lg col-sm-3" type="button"&gt;清除&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;

      &lt;div class="text-center bg-light box-shadow mx-auto" style="width: 96%; height: 160px; border-radius: 21px 21px 0 0; padding-top: 20px;"&gt;
          &lt;p id="output"&gt;as a book-collector, i have the story you just want to listen!&lt;/p&gt;
      &lt;/div&gt;

    &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;!-- &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"&gt;&lt;/script&gt; --&gt;
    &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
    &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
</code>

js

<code>$(document).ready(function(){

    $("#submit").click(function(event){
        event.preventDefault();

        ajaxSubmitQa();
    });
    
    function ajaxSubmitQa() {
        console.log("ajaxSubmitQa");

       var inputRequest = $("#inputRequest").val();
        console.log("inputRequest=%s", inputRequest);
        var encodedInputRequest = encodeURIComponent(inputRequest)
        console.log("encodedInputRequest=%s", encodedInputRequest);

        var qaUrl = "http://47.96.131.109:32851/qa";
        console.log("qaUrl=%s", qaUrl);
        var fullQaUrl = qaUrl + "?input=" + encodedInputRequest
        console.log("fullQaUrl=%s", fullQaUrl);

      $.ajax({
         type : "GET",
         url : fullQaUrl,
         success: function(respJsonStr){
                console.log("respJsonStr=%s", respJsonStr);

                $('#output').empty();

                //
            // if(result.status == "Done"){
            //     $('#getResultDiv ul').empty();
            //     var custList = "";
            //     $.each(result.data, function(i, customer){
            //        var customer = "- Customer with Id = " + i + ", firstname = " + customer.firstname + ", lastName = " + customer.lastname + "
";
            //        $('#getResultDiv .list-group').append(customer)
              //    });
            //     console.log("Success: ", result);
            // }else{
            //     $("#getResultDiv").html("&lt;strong&gt;Error&lt;/strong&gt;");
            //     console.log("Fail: ", result);
            // }
         },
         error : function(err) {
            $("#output").html("&lt;strong&gt;Error&lt;/strong&gt;");
            console.log("GET: ", qaUrl, " ERROR: ", err);
         }
      });
    }
});
</code>

出错：

<code>main.js:22 Uncaught TypeError: $.ajax is not a function
    at ajaxSubmitQa (main.js:22)
    at HTMLButtonElement.&lt;anonymous&gt; (main.js:6)
    at HTMLButtonElement.dispatch (jquery-3.3.1.slim.min.js:2)
    at HTMLButtonElement.v.handle (jquery-3.3.1.slim.min.js:2)
</code>

Uncaught TypeError: $.ajax is not a function

jquery – TypeError: $.ajax(…) is not a function? – Stack Overflow

“Neither of the answers here helped me. The problem was: I was using the slim build of jQuery, which had some things removed, ajax being one of them.

The solution: Just download the regular (compressed or not) version of jQuery here and include it in your project.”

我这里也是用到是：

jquery-3.3.1.slim.min.js

所以去换用标准的jquery

jQuery

https://jquery.com

https://jquery.com/download/

-》

https://code.jquery.com/jquery-3.3.1.min.js

https://code.jquery.com/jquery-3.3.1.js

https://code.jquery.com/jquery-3.3.1.min.map

改为：

<code>&lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
&lt;script src="js/jquery-3.3.1.js"&gt;&lt;/script&gt;
&lt;!-- &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt; --&gt;
</code>

然后就可以了。

【总结】

此处已经确保了，html代码底部加载的js中，先加载jquery，再去加载其他，比如自己的main.js的。

但是main.js中却找不到$.ajax

原因是：

之前参考bootstrap的sample的代码中用到的是slim版本的jquery，其已经去除了ajax了。

解决办法：

去官网：

https://jquery.com/download/

下载普通版本的jquery：

“Download the compressed, production jQuery 3.3.1”

或：

“Download the uncompressed, development jQuery 3.3.1”

换上，即可。

转载请注明：在路上 » 【已解决】js调用ajax去get请求服务器接口出错：Uncaught TypeError: $.ajax is not a function