Redirect to an external URL by passing post form data in React JS?

Question

I have a form in my page and when I submit the form I should call an API and that API's result, let it be sample data like,

{ "sample1" : "abc", "sample2" : "def" }

should be redirected to an external URL and this sample data object should be passed as form data to the URL.

I tried using AJAX but it doesn't seem to work,

 $.ajax({
                type: 'POST',
                url: EXTERNAL_URL,
                data: sampleData ,
                success: function(result) {
                    console.log("success!")
                }
            });

Can someone help me with the right approach for this?

Answer 1

For the form data way of sending, you would need to make a hacky way for achieving this goal, since sending form data to a URL was originally used for submitting a form.

You can refer to this answer here: Create invisible form with input elements

TL DR
Create a form with invisible input elements and submit artificially this form and go to your external link:

function goToExternalURL() {
  const objectForSending = { "sample1" : "abc", "sample2" : "def" };

  const form = document.createElement('form');
  form.method = 'POST';
  form.action = 'http://externalurl.com';

  // Sample 1
  const hiddenFieldSample1 = document.createElement('input');
  hiddenFieldSample1.type = 'hidden';
  hiddenFieldSample1.name = 'sample1';
  hiddenFieldSample1.value = objectForSending.sample1;
  form.appendChild(hiddenFieldSample1);

  // Sample 2
  const hiddenFieldSample2 = document.createElement('input');
  hiddenFieldSample2.type = 'hidden';
  hiddenFieldSample2.name = 'sample2';
  hiddenFieldSample2.value = objectForSending.sample2;
  form.appendChild(hiddenFieldSample2);

  document.body.appendChild(form);
  form.submit();
}

---

Sending query params:

Alternatively you can use query params way of sending, but that exposes the data in the URL:

2 separate query parameters

For this solution you can just navigate to an URL with 2 query params with names from your object:

const objectForRedirect = { "sample1" : "abc", "sample2" : "def" };

window.location.href = `redirecturl.com/?sample1=${objectForRedirect.sample1}&sample2=${objectForRedirect.sample2}`;

Send serialized object as query param value

const objectForRedirect = { "sample1" : "abc", "sample2" : "def" };

// Stringify the object and prepare it for URL
const strinfigiedObject = JSON.stringify(objectForRedirect); // '{"sample1":"abc","sample2":"def"}'
const serializedObject = encodeURIComponent(strinfigiedObject); // '%7B%22sample1%22%3A%22abc%22%2C%22sample2%22%3A%22def%22%7D'

window.location.href = `redirecturl.com/?param=${serializedObject}`;

On the receiving side you can just do the opposite operation:

const decodedParamValue = decodeURIComponent(valueFromQueryParam);

const parseStringToObject = JSON.parse(decodedParamValue);