AJAX request not calling python-flask method

Question

I'm trying to call an AJAX request with XMLHttpRequest() from JavaScript to a flask server but the problem is that request.open() doesn't seem to work as the python function is not being called.
The .js code is

document.addEventListener("DOMContentLoaded", () => {
    document.querySelector(".messaging-channel").onclick = () => {
        const channelName = document.querySelector(".messaging-channel").innerHTML;
        var request = new XMLHttpRequest();
        request.open("POST", "/channel");

        window.alert(`${channelName}`);
        request.onload = () => {
            const response = JSON.parse(request.responseText);
            const messages = response.channel;
            window.alert(`${messages} are the messages.`);
        };
    };
});

and the flask method is

@app.route("/channel", methods=["POST", "GET"])
def channel():
    print("Working python\n\n")
    return jsonify({"channel": "Working"})

Both of the files are connected and window.alert(`${channelName}`); executes fine in the .js file. Though the request is not calling the python function. I also checked this on the debugger by safari and it would say that:

arguments: TypeError: 'arguments', 'callee', and 'caller' cannot be accessed in this context.
caller: TypeError: 'arguments', 'callee', and 'caller' cannot be accessed in this context.

I have attached the photo of the debugger's relevant parts.

`send()` is for both `GET` and `POST` and `send(data)` is for `POST`. Without `send()` you don't send request to server. — furas, Jun 10 '20 at 06:27

furas · Answer 1 · 2020-06-10T06:41:31.880

1

You have to use request.send() to send request to server.

It doesn't matter if you use GET, POST, PUT, DELETE, HEAD, etc.

from flask import Flask, render_template_string, jsonify

app = Flask(__name__)

@app.route('/')
def index():
    return render_template_string('''
<button class="messaging-channel">SUBMIT</button>

<script>
document.addEventListener("DOMContentLoaded", () => {
    document.querySelector(".messaging-channel").onclick = () => {
        const channelName = document.querySelector(".messaging-channel").innerHTML;
        var request = new XMLHttpRequest();
        request.open("POST", "/channel");

        window.alert(`${channelName}`);
        request.onload = () => {
            const response = JSON.parse(request.responseText);
            const messages = response.channel;
            window.alert(`${messages} are the messages.`);
        };

        request.send();
    };
});
</script>''')

@app.route("/channel", methods=["POST", "GET"])
def channel():
    print("Working python\n\n")
    return jsonify({"channel": "Working"})

if __name__ == '__main__':
    app.run()

edited Jun 10 '20 at 06:41

answered Jun 10 '20 at 06:35

furas

134,197
12
106
148

The python function is now being called but request.onload function is still having the same problem. It is still giving me *arguments: TypeError: 'arguments', 'callee', and 'caller' cannot be accessed in this context. caller: TypeError: 'arguments', 'callee', and 'caller' cannot be accessed in this context.* – Aditya Goyal Jun 10 '20 at 08:17
this code works for me without problem. I didn't try to run it with debuger and maybe all your problem is only debuger. OR maybe problem is more complex and need full code to see this error. OR maybe server has some restrictions and it makes problem to run code. Probably you should use Google to serch `onload TypeError: 'arguments', 'callee', and 'caller' cannot be accessed in this context.` Maybe someone already had this problem. – furas Jun 10 '20 at 13:53
I found with Google [ReferenceError: deprecated caller or arguments usage](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage) and it shows this problem when JavaScript uses `'use strict';` – furas Jun 10 '20 at 13:58
I found with Google [AJAX Error: TypeError: 'arguments', 'callee', and 'caller' cannot be accessed in this context](https://stackoverflow.com/questions/47871301/ajax-error-typeerror-arguments-callee-and-caller-cannot-be-accessed-in) and it shows `X-origin restrictions` which can block it. – furas Jun 10 '20 at 14:00

AJAX request not calling python-flask method

1 Answers1