折腾:
期间,需要去在纯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