Hello,
Could you please help with my questions below? I've just started learning so it could be quite basic. I'm doing a web app using html and css which has input forms to input data, then a javascript to collect data and send to server in a json format. On server side, I have created an app by django which links to my html page and to receive json, then call python scripts to process and return data back to front end.
The issue now is I could not send json to server and send back result json file to js front end. I've tried js code as below but not successful. It appears that I'm confused about which url to post, and might be something with the token.
Could you please let me know what I should do to get this right, and some general guideline to do things I have mentioned above? I've tried to search but there seems to be little information. I really appreciate you support.
function sendJSON(){
let result = document.querySelector('.result');
let name = document.querySelector('#name');
let email = document.querySelector('#email');
let xhr = new XMLHttpRequest();
let url = "https://www.pythonanywhere.com/api/v0/user/{myusername}/files/";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
// Create a state change callback
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// Print received data from server
result.innerHTML = this.responseText;
}
};
// Converting JSON data to string
var data = JSON.stringify({ "name": name.value, "email": email.value });
// Sending data with the request
xhr.send(data);
html code is as follows with {% csrf_token %} has been added to avoid cors error. Is it the right way?
<form>
{% csrf_token %}
<input type="text" id="name" placeholder="Your name">
<br></br>
<input type="email" id="email" placeholder="Email">
<br></br>
<!-- Button to send data -->
<button onclick="sendJSON()">Send JSON</button>
</form>
<!-- For printing result from server -->
<p class="result" style="color:green"></p>