I have the following files HTML:
<!DOCTYPE html>
<html>
<body>
<input id = "input_thing">
<button id="demo" onclick="myFunction()">Click me.</button>
<script src='script.js'></script>
JS:
function myFunction() {
var x = document.getElementById("input_thing").value;
const Http = new XMLHttpRequest();
const url=' https://*****.****.**/doctorapi/'+x;
fetch(url).then(function (response) {
console.log(response.json());
document.getElementById('demo').innerHTML=response.json();
})
}
Essentially I'm trying to print the response to a request I send. The website which I created is receiving requests.
Here is some of that code
@app.route('/doctorapi/<query>')
def next(query):
respons = query_search(query)
respons=str(respons)
response = make_response(jsonify(
{
"medical_response":respons,
"query":query
}
))
return response
and when I go on my browser, I see the response. However, the JS isn't getting that JSON and logs and empty string. How do I fix this? What's the correct way of sending a request>
The json() function of the response object is asynchronous. It therefore returns an object of the Promise type. To get the final result, it must either be expected with the await keyword or processed in a subsequent then.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form name="search-form">
<input type="text" name="query" />
<button type="submit">Click me</button>
</form>
<output name="search-result"></output>
<script type="text/javascript">
(() => {
const formElem = document.querySelector('form[name="search-form"]');
formElem.addEventListener('submit', event => {
event.preventDefault();
fetch(`/doctorapi/${encodeURIComponent(event.target.query.value)}`)
.then(resp => resp.json())
.then(data => {
const outElem = document.querySelector('output[name="search-result"]');
outElem.innerHTML = JSON.stringify(data);
});
});
})()
</script>
</body>
</html>
@app.route('/doctorapi/<query>')
def search(query):
data = 'my-search-result'
return jsonify(query=query, results=data)