0

I am working with Amazon's Mechanical Turk, trying to build an ExternalQuestion site which POSTs data back to AMT using a form-- this is the typical method of passing back answers from an ExternalQuestion, mandated by their API.

Very specifically, I am trying to do this in ReactJS, because it has simplified every other aspect of this project.

Is it possible to get React to POST form data without using an external back-end like Flask/python?

This is an important requirement because as far as I can tell from this information (and my own wasted time), using Flask/python will make the POST data look like it is coming from my server, rather than the Worker's browser, and will get rejected.

And yet, when I look through the React documentation on forms I don't even see a discussion of form methods, like GET and POST. I understand that React is going to want this handled by something like an onClick() function, but I can't see any way to do this in React without making the data look like it's coming from my server rather than Worker's browser.

Novak
  • 4,687
  • 2
  • 26
  • 64

2 Answers2

1

Form post is just XHR POST with form-data or x-www-form-urlencoded body and get text/HTML returned. This can be done on React with Axios.

This answer show using Axios to send form-data -> https://stackoverflow.com/a/47630754/3849555

Chayne P. S.
  • 1,558
  • 12
  • 17
  • I'm not knowledgeable enough about Axios to know: Will this look like it's coming from the server, or from the Worker's browser? – Novak Sep 19 '20 at 00:17
  • 1
    @Novak, This is the direct sending from browser. You don't need any backend to do that. Thinking about React crate HTTP call looked like form submission. Simple as that. – Chayne P. S. Sep 19 '20 at 00:21
1

Your best shot is to use the built in JavaScript Fetch API with the FormData interface.

For the body you can pass in the payload what you can generate with the FormData interface; MDN's documentation on it:

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

Don't use XMLHttpRequest, fetch is the newer that is built on that.

A Generic example with fetch would look like the following:

const formData = new FormData();

formData.append('username', 'abc123');
formData.append('foo', 'bar);

fetch('https://example.com/foo/bar', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', JSON.stringify(response)))

This fetch call then can be called based on a user action like onClick.

anddak
  • 611
  • 1
  • 6
  • 17
  • After some serious effort-- and wrapping in useState and useEffect hooks-- this looks like it might work. Just as soon as I figure out how to solve the CORS issue waiting for me like a landmine. So I can upvote, but I cannot yet accept because I haven't proven it works. – Novak Sep 20 '20 at 07:08
  • Yes, this is the standard way of doing it, I mean there are third party libraries like axios, but I see this used most often. CORS is a different story, maybe this will help: https://javascript.info/fetch-crossorigin – anddak Sep 20 '20 at 18:21