Can't send large json data via XMLHttpRequest - javascript

Question

I need to pass a json variable as a paramater to a php script that will process the json data and store it in Database.

So first, in javascript, i was testing sending data like this :

$('#sendResult').load('http://localhost/myurl/phpFile.php?mrData=' + jsonArrFinal);

This was working well when passing small records (records can vary, it depends the data that user insert).

But when i increased the records, it started appearing this error in console:

414 (Request-URI Too Long)

I've changed the js code to:

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost/myurl/phpFile.php?mrData=' + jsonArrFinal );
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.send();

But still appearing the same error with POST method. I've checked the json param and it has 5439 characters.

How can i resolve this? Thanks in advance.

Please note that the length can be 8x more than 5439 characters.

Answer 1

Don't use a GET request.

You're storing data, so you should be using a POST request anyway.

Use $.post instead of $.load and write your own logic to display the response in the done() handler.

---

I've changed the js code to:

You need to put the data in the body of the request. POST requests don't change the rules for how much data you can put in the URL.

---

$.post("http://localhost/myurl/phpFile.php", { mrData: jsonArrFinal })
 .done( data => $("#sendResult").html(data) );