How to send POST data in ajax?

Question

I need to write a script that receives and parses a JSON array within the POST array. In order to do this, I'm first trying to just send any old JSON data to my script so I have something to work with.

My receiving script is in PHP (but alternately could be done in Javascript.) Right now, I'm just serializing the POST array and writing it to a text file to make sure something is coming in. What it's writing is an empty array, though.

I'm trying to send the data using an ajax request. This is what I have at the moment:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(document).ready(function() { var jsondata = JSON.stringify({ val1:"this", val2:"that" }); $.ajax({ url: "http://api.mydomain.com/test/index.php", method: "POST", data: {json: jsondata}, contentType: "application/json", success: function(data){alert(JSON.stringify(data));}, error: function(errMsg) { alert(JSON.stringify(errMsg)); } }); }); </script> </head> <body> </body> </html>

I've tried lots of variations on this, too, including

not stringifying jsondata
changing data to this: data: jsondata
using type: instead of method:in the request
including datatype: "json" in the request

and some other variations I can't even remember at this point. Am I missing something simple? Or is there an easier way to accomplish this?

EDIT: adding my index.php file

if (isset($_POST)){ // This line is commented out because it breaks it. //$jspost = json_decode($_POST['json']); $jsser = serialize($_POST); echo "I'm here."; // Write to text file $myfile = "response.txt"; $fh = fopen($myfile, 'w') or die("can't open file"); $now = date("n/j/y g:i:s a"); fwrite($fh, $now."\r\n"); fwrite($fh, "I received a POST.\r\n"); fwrite($fh, $jsser); fwrite($fh, "\r\n\n"); fclose($fh); }

What does JSON.stringify(data) output in your success callback? — ann0nC0d3r
– ann0nC0d3r, Commented Jan 19, 2016 at 16:35
Can we see the content of your index.php file? A good strategy is to do vardumps and die() in the php script to be sure is not a server side error. If not, console.log(JSON.stringify(data)) to check the response. — Randall Valenciano
– Randall Valenciano, Commented Jan 19, 2016 at 16:39
The output of JSON.stringify(data) in the success callback is, "I'm here.", which is echoed from the index.php file. — user3353762
– user3353762, Commented Jan 19, 2016 at 17:15
I figured it out! It was my contentType. When I set it to "application/x-www-form-urlencoded; charset=UTF-8" instead of "application/json", then var_dump on index.php showed the values of jsondata coming through. — user3353762
– user3353762, Commented Jan 19, 2016 at 19:32

onlycparra · Accepted Answer · 2019-05-09 12:11:33Z

JS
Send a JSON String

 $(document).ready(function () { var obj = { val1: "this", val2: "that" }; obj.val3 = 'these'; obj['val4'] = 'those'; $.ajax({ type: "POST", url: "service.php", data: { json: JSON.stringify(obj) }, success: function (response) { //service.php response console.log(response); } }); });

service.php
Decode and work the received object

$json = filter_input(INPUT_POST, 'json'); $decoded_json = json_decode($json); $val1 = $decoded_json->val1; var_dump($decoded_json, $val1);

Viceversa, if you want to send a JSON from php and decode it into JS

PHP

$responseArray = array(); $responseArray['key1'] = 'value1'; $responseArray['key2'] = 'value2'; echo json_encode($responseArray);

JS

success: function (response) { var decodedJson = JSON.parse(response); console.log(decodedJson['key1']); }

I'd give this a vote if I could (not enough reputation points) because it had a lot of useful information that ultimately led to me figuring out that contentType was the issue.

DanimalReks · Accepted Answer · 2021-02-21 02:32:15Z

This worked for me... I was not using a form but rather data variables collected from the element. I tried the previous methods and did not get a result.

<script> $(document).ready(function() { var jsondata = new FormData(); jsondata.append("val1", "this"); jsondata.append("val2", "that"); $.ajax({ url: "http://api.mydomain.com/test/index.php", method: "POST", data: jsondata, contentType: false, cache: false, processData: false, dataType: 'json', success: function(data){alert(JSON.stringify(data));}, error: function(errMsg) { alert(JSON.stringify(errMsg)); } }); }); </script>

Janid Ham · Accepted Answer · 2016-01-19 16:46:32Z

try this

var jsondata = { "val1":"this", "val2":"that" }; $.ajax({ url: "http://api.mydomain.com/test/index.php", method: "POST", data: jsondata, contentType: "json", success: function(data){ //your success function }, error: function(errMsg) { //your error function } });

I just tried that but am still seeing an empty array when I serialize POST and write it to response.txt.

Collectives™ on Stack Overflow

How to send POST data in ajax?

3 Answers 3

1 Comment

Comments

1 Comment

Hot Network Questions