Forums

Javascrip post json to web api

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>

It looks like your code is written to post to the PythonAnywhere API instead of to your own Django code. I would expect the URL that you are posting to to be something like https://hongpham.pythonanywhere.com/something. Accessing our API from JavaScript code would be a security problem, because you would need to put your API token in the JS source, where it could be discovered by anyone who viewed your site, and then they would be able to make changes to your files and data on PythonAnywhere.