Tinyweb and XMLHttpRequest

[Semicolonist]

I'm using Tinyweb library on ESP32. I need to send JSON from website to ESP32 and from ESP32 to website.
So that's my code from website:

For json request:

Code: Select all

        var xhttpData = new XMLHttpRequest();
        xhttpData.open('POST', 'DATAJson', true);
        xhttpData.setRequestHeader("Content-Type", "application/json");
        xhttpData.onreadystatechange = function() 
        {
            if (xhttpData.readyState === 4) 
            {
                var DATAJson = xhttpData.response; 
                console.log(DATAJson)
            }
        }
        xhttpData.send();

For json send:

Code: Select all

            var xhttp2 = new XMLHttpRequest();
            xhttp2.open('POST', 'DATAJsonRecv', true);
            xhttp2.setRequestHeader("Content-Type", "application/json");
            xhttp2.onreadystatechange = function() 
            {
                if (xhttp2.readyState === 4) 
                {
                    alert("Data sent");
                }
            }
            xhttp2.send('{"JsonTestValue":5}');

And that's my code on ESP32 (routes part):

Code: Select all

	@app.route('/DATAJson')
	async def index(request, response):
    		await response.send_file('data.json')
    	@app.route('/DATAJsonRecv')
	async def index(request, response):
    		await print(request)

When I try to get JSON from ESP using website I get error 405.
But when I simply write an address 192.168.4.1:8081/DATAJson i get the text of json in web browser. So I guess that code on ESP is correct.
When I try to send JSON to ESP I don't see any reaction.
What I'm doing wrong?

[jimmo]

When I try to get JSON from ESP using website I get error 405.
But when I simply write an address 192.168.4.1:8081/DATAJson i get the text of json in web browser. So I guess that code on ESP is correct.

One difference is that you're doing a GET request from the browser, but the javascript is doing a POST.

I don't know enough about TinyWeb but that might at least give you something to test?

When I try to send JSON to ESP I don't see any reaction.
What I'm doing wrong?

"await print" will not work. You can only await an async function.

[Semicolonist]

It helped. I tested it and I changed:

Code: Select all

xhttpData.open('POST', 'DATAJson', true);

to:

Code: Select all

xhttpData.open('GET', 'DATAJson', true);

And it's working.
But to send JSON from website to ESP I need POST method. I get error 405 on the website so I tried to add "methods" to route on ESP like that:

Code: Select all

    	
    	@app.route('/DATAJsonRecv', methods = ['POST'])
	async def index(request, response):
    		print(request.read_parse_form_data())
    		await response.start_html()
    		await response.send("201")

And now I don't have error 405 and it seems working but I can't read my data from request. From print I get "<generator object 'read_parse_form_data' at 3ffc8260>".
In documentation I found:

read_parse_form_data() - By default (again, to save CPU/memory) tinyweb doesn't read form data. You have to call it manually unless you're using RESTApi. Returns dict of key / value pairs.

I need basic string to json.loads() it. How can I get string from this POST data?

[jimmo]

I don't know much about tinyweb, but based on that output, I would assume that it should be

print(await request.read_parse_form_data())

(Note "print(await foo())" is not the same as "await print(foo())".

[Semicolonist]

Noted
I changed it, now output is "{}"
EDIT:
I added:

Code: Select all

max_body_size = 2048, save_headers = ["Content-Length","Content-Type"], allowed_access_control_headers = ["Content-Length","Content-Type"]

to route configuration and now everything works fine.
Thank you for all your help!