最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

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

服务器 crifan 3154浏览 0评论
折腾:
【已解决】本地搭建前端Web页面实现机器人问答的产品演示
期间,需要去在纯html+css+js中,
bootstrap,jquery中,写js代码去调用服务器的get的api接口。
bootstrap jquery request get
jQuery AJAX get() and post() Methods
jQuery get() Method
jQuery AJAX Methods
jQuery Ajax GET and POST Requests – Tutorial Republic
How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot – JavaSampleApproach
jquery ajax get para encoding
javascript – URL Encode a string in jQuery for an AJAX request – Stack Overflow
jQuery Encode/Decode URL String — SitePoint
JavaScript encodeURI() Function
然后:
【已解决】js调用ajax去get请求服务器接口出错:Uncaught TypeError: $.ajax is not a function
只不过又出现其他错误了:
【已解决】js中ajax接口get接口出错:No Access-Control-Allow-Origin header is present on the requested resource
【总结】
此处,想要用js去调用服务器的rest api的get接口,写法是:
html
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
    <script src="js/bootstrap.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
static/js/main.js
$(document).ready(function(){

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

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

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

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

        $.ajax({
           type : "GET",
           url : fullQaUrl,
           success: function(respJsonObj){
                console.log("respJsonObj=%o", respJsonObj);
           },
           error : function(err) {
              $("#output").html("<strong>Error</strong>");
              console.log("GET: ", qaUrl, " ERROR: ", err);
           }
        });
    }
});
即可。
其中:
1.不能用slim的jquery,否则会出现找不到ajax。
2.注意要jquery.js放在自己的main.js之前。
3.期间可能会出现CORS错误,解决办法是:
确保当前Chrome中安装了CORS插件,且启用了,即可避免此错误。

转载请注明:在路上 » 【已解决】Bootstrap的css中如何用js去提交http的get请求调用服务器的REST API

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
80 queries in 0.246 seconds, using 22.22MB memory