Search code examples
javascriptphpjsonxmlhttprequestfrontend

Can't send large json data via XMLHttpRequest - javascript

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.

Solution

  • 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) );