折腾:
期间,需要去在纯html+css+js中,
bootstrap,jquery中,写js代码去调用服务器的get的api接口。
bootstrap jquery request get
jquery ajax get para encoding
然后:
只不过又出现其他错误了:
【总结】
此处,想要用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