Я пытаюсь вызвать веб-сервис (написанный с Flask) со страницы HTML, используя AJAX и JavaScript.Веб-сервис вызывается и выполняется успешно, и я вижу результаты, которые я напечатал на STDOUT.Управление происходит и внутри функции AJAX success.Однако выходные данные ответа веб-службы не отображаются в браузере.
Вот мой HTML-файл.
<!-- include ajax -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<!-- form, button and output -->
<center>
<input type="text" id="input" name="input" size="50" placeholder="Enter input"/>
<button id="btn">Click</button>
<div id="api_input"> Input </div>
<div id="api_output"> Output </div>
</center>
<script type="text/javascript">
function api_call(input) {
$.ajax({
url: "http://127.0.0.1:5000/api",
method: 'POST',
contentType: 'application/json',
data: JSON.stringify(input),
success: function( data, jQxhr ){
$("#api_input").html( data.input );
$("#api_output").html( data.output );
$("#input").val("");
},
error: function( jqXhr, errorThrown ){
$("#api_output").html( "There was an error" );
console.log( errorThrown );
},
timeout: 10000
});
}
$( document ).ready(function() {
// request when clicking on the button
$('#btn').click(function() {
// get the input data
var input = $("#input").val();
api_call(input);
input = "";
});
});
</script>
Я знаю, что вызов веб-службы выполнен успешно, поскольку $("#input").val("");выполняется, и ввод сбрасывается, однако api_input и api_output остаются неизменными.
Я абсолютный новичок в этих технологиях, поэтому я уверен, что где-то делаю что-то очень глупое.Итак, любая помощь приветствуется:)