Can't send JSON as string via AJAX - javascript

So I'm trying to send a JSON as a string.
Then I have a PHP back-end that retrieves this JSON string and parses it using json_decode.
Unfortunately, I can't get to send this JSON as a string.
Here's the jQuery Ajax script I used:
var jsonString = JSON.stringify(checkables);
console.log(jsonString);
$.ajax({
url: $url,
type: 'POST',
data: {ajaxidate: JSON.stringify(jsonString)},
contentType: "application/json; charset=UTF-8",
success: function (data)
{
// just successful callback
},
error: function ()
{
// just error callback
}
});
Variable checkables contains raw form as JSON data:
After applying JSON.stringify(), this is now how it looks:
[{"name":"name","type":"multialphanumslug","value":"AD"},{"name":"server","type":"host","value":"10.1.1.1"},{"name":"port","type":"number","value":"8080"},{"name":"authid","type":"username","value":"barryallen"}]
At the back-end, I have this PHP script:
<?php
var_dump($_POST);
die();
?>
Now I suppose $_POST at back-end should now contain this:
array(
'ajaxidate' => "[{\"name\":\"name\",\"type\":\"multialphanumslug\",\"value\":\"AD\"},{\"name\":\"server\",\"type\":\"host\",\"value\":\"10.1.1.1\"},{\"name\":\"port\",\"type\":\"number\",\"value\":\"8080\"},{\"name\":\"authid\",\"type\":\"username\",\"value\":\"barryallen\"}]"
);
But it didn't receive anything. Here's the captured request:
The response from back-end?
I tried with POSTMan and I received an expected correct output:
Now that was ridiculous.
I'm stuck at this for 2 days trying to figure out what's going on or what did I miss. Any help will be greatly appreciated.

You need to parse the data on the server:
$myArray = json_decode($_POST['ajaxidate']);
var_dump($myArray);
Consider this:
<?php
$a = '[{"a": 1}]';
$b = json_decode($a);
var_dump($a);
var_dump($b);
?>
Output:
string(10) "[{"a": 1}]"
array(1) {
[0]=>
object(stdClass)#1 (1) {
["a"]=>
int(1)
}
}
dataType: 'json', tldr: Use It!
When setting dataType = json you tell jQuery that the response from the server should be interpreted as JSON and it will therefore parse it for you and give the parsed object / array as first argument to the success callback:
$.ajax({
// ...
dataType: 'json',
success: function(myJson) {
console.log(myJson); // this will be a JSON object/array...
}
});

As you mention dataType: json in your ajax call data need to be in json formate but using JSON.stringify convert Json object to json String that with make problem for you need to change
`var jsonString = JSON.stringify(checkables);`
to
var jsonString = checkables;
JSON.stringify()

Solved my own problem. Having #Munna suggested to use $.post() made me figure out to eliminate the unnecessary. From that case, the unnecessary is contentType option from $.ajax().
This is the updated working solution:
$.ajax({
url: $url,
type: 'POST',
data: {ajaxidate: JSON.stringify(jsonString)},
success: function (data)
{
// just successful callback
},
error: function ()
{
// just error callback
}
});
Thanks everyone who helped. Have a good day

Related

Passing PHP array to js with ajax

I already looked up questions about this topic but couldn't figure my problem out.
I have a php file which contains the array:
$data = ['logged' => $_SESSION['loggedin'], 'sessName' => $_SESSION['name']];
echo json_encode($data);
Here's my AJAX code, but I have no idea what should I put in "data". Basically my goal is to use the $data array in my Javascript code. (So i can manipulate DOM with conditions).
<script>
$.ajax({
type: 'POST',
dataType: "json",
url:'sign-in.php',
data:
success: function(data)
{
try {
data = JSON.parse(data);
}catch(e) {}
console.log(data);
}
});
</script>
By specifying dataType: "json" in your $.ajax call, jQuery will automatically parse your JSON data into javascript object / array for you. You can probably remove the JSON.parse form you code.
Also there is an extra data: line, which would be a javascript syntax error.
<script>
$.ajax({
type: 'POST',
dataType: "json",
url:'sign-in.php',
success: function (data) {
console.log(data);
},
});
</script>
One more thing. Your PHP code, expects both 'loggedin' and 'name' to be set in your $_SESSION. If not, your PHP (depends on settings) might generate warning message in between and cause JSON parsing error.
You can use the null coalescing operator (introduced since PHP 7.0) to assign some value if either or both values are not set:
$data = [
'logged' => $_SESSION['loggedin'] ?? FALSE,
'sessName' => $_SESSION['name'] ?? '',
];
echo json_encode($data);
Updated: Add proper handling to potential invalid key issue.
In your example you haven't intiliaze the session with session_start(), also it recomanded to indicate the response content type, and i fix also your ajax request :
PHP :
session_start();
$data = [
'logged' => $_SESSION['loggedin'],
'sessName' => $_SESSION['name'],
];
header("Content-type: application/json");
echo json_encode($data);
exit();
Jquery :
$.ajax({
type: 'GET',
dataType: "json",
url:'sign-in.php',
success: function(data)
{
try {
data = JSON.parse(data);
} catch(e) {}
console.log(e);
}
}
});

Can't decode JSON from Javascript to PHP

i'm passing a JSON from javascript to PHP inside an ajax question.
Json is this (printed from PHP, without json_decode):
[{"id":"440","step":"1","pass_rules":{"manual":false,"check_percent":true,"quiz":false,"list_element":["id1"]}},{"id":"438","step":"2","pass_rules":{"manual":false,"check_percent":true,"quiz":true,"list_element":["id1"]}}]
Is passed though an ajax:
var formData = new FormData(this);
formData.append('array', JSON.stringify(fullArray));
$.ajax({
type: "POST",
url: URL_API + "/call_to_api",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (json) {
//code
}
})
If get array in this way from PHP, i can print the json like the json on top of the post
$array = mysql_real_escape_string($_POST['array']);
json_decode is not working on the element, and print empty.
I don't undestand why!
UPDATE: array is passed inside the form in this way:
array: [{"id":"441","step":"1","pass_rules":{"manual":false,"check_percent":true,"quiz":false,"list_video":[]}},{"id":"438","step":"3","pass_rules":{"manual":false,"check_percent":true,"quiz":true,"list_video":[]}}]
json_last_error() called here:
$array= json_decode($_POST['array']);
json_last_error();
json_last_error returns 4 so JSON_ERROR_SYNTAX...but JSON seems good :/
UPDATE2: var_dump output:
string(388) "[{"id":"441","step":"1","pass_rules":{"manual":false,"check_percent":true,"quiz":false,"list_video":[]}},{"id":"438","step":"3","pass_rules":{"manual":false,"check_percent":true,"quiz":true,"list_video":[]}}]"

PHP $_POST empty during AJAX post request

Goal: Serialize data, send them in HTTP POST request using AJAX, proceed data in PHP (and answer)
Problem: PHP $_POST variable seems to be empty
JS/AJAX
var postData = [cmd, data];
alert(postData = JSON.stringify(postData));
$.ajax({
url: "./backendTag.php",
type: "post",
data: postData,
dataType: 'json',
success: function (response) {
alert(response); // Empty
//logToServerConsole(JSON.parse(response));
},
error: function(jqXHR, textStatus, errorThrown) {
logToServerConsole("E3"); // Communication Error
console.log(textStatus, errorThrown);
}
});
PHP
<?php echo json_encode($_POST);
The reason for the same is probably because you are not posting properly in javascript. Before i add the codes, let me add a couple of tips on how to debug in these situations.
First is, you check if the request is properly formed. Inspect the network in browser dev tools.
Second method could be to use var_dump on $_POST to list out all the post parameters and check if they have been recieved in PHP
Now as far as the code goes
here is the javascript
$.ajax({
method: "POST",
url: "url.php",
data: { name: "John Doe", age: "19" }
}).done(function( msg ) {
alert(msg);
});
and in php you can simply check using
<?php
print $_POST["name"];
?>
which would work perfectly. Notice how the data in javascript is a list, while from what you wrote seems to be json string
Apparently we can't pass an array directly after serializing him. The following code resolved the problem. (Split array)
data = JSON.stringify(data);
var JSONdata = {"cmd" : cmd, "data" : data};
$.ajax({
url: "./backendTag.php",
type: "post",
data: JSONata,
dataType: 'json',
/* Handlers hidden*/
});
JSON content won't be parsed to the $_POST globals. If you want to reach them, try to get from php://input with:
file_get_contents('php://input')
And I suggest giving the content-type during the ajax request:
contentType: 'application/json',
If it's not working, try to set the data as a string, with JSON.Stringify, like the following:
data: JSON.stringify(postData)

PHP is not able to read data sent in jQuery.ajax POST

JavaScript code:
var data = {"hiSO": "my very complex - nested objects/arrays - data object"};
var j = jQuery.noConflict();
j.ajax({
type: "POST",
url: "postTestingResult.php",
contentType: "application/json; charset=utf-8",
data: {"data": JSON.stringify(data)},
dataType: "json",
success: ajaxSuccess,
error: ajaxError
});
PHP Code:
header('Content-Type: application/json');
if(!empty($_POST['data'])) {
$data = json_decode($_POST['data']);
//do things with data
echo json_encode(array("success" => "thanks for the info!"));
} else {
echo json_encode(array("error" => "'data' is not set or is NULL"));
}
No matter how I structure the data, $_POST['data'] always seems to be empty (specifically, Undefined). If you want a full copy of the data object I am using, check out this JSFiddle. Appreciate the help, thank you!
You've told the server you're sending JSON (via contentType: "application/json; charset=utf-8"), but you're not sending JSON, you're sending URI-encoded data. This is because you've given jQuery an object for the data option (an object with one property, whose value is a JSON string).
Your PHP code expects URI-encoded data, so to fix it just remove the contentType option so jQuery uses its default.
If you really want to send JSON instead (which would require changing your PHP), change
data: {"data": JSON.stringify(data)},
to
data: JSON.stringify(data),
or
data: JSON.stringify({data: data}),

How to transfer json string to another page using jquery's ajax method?

I have a JSON string (stringified array of objects in javascript) which i intend to post to another page and then retrieve it from the $_POST variable. I used json =JSON.stringify(array).
The result gave me the following string
json = [{"keycodec":68,"eventc":"keydown","timec":1392849542994}
{"keycodec":65,"eventc":"keydown","timec":1392849543063},
{"keycodec":87,"eventc":"keydown","timec":1392849543084}]
Now I use
$( "#other").click(function() {
$.ajax({
url: 'some.php',
type: 'POST',
data: { kite : json}
});
On the page some.php I use
$kite=json_decode($_POST['kite'],true);
print_r($kite)
But nothing shows up. I have read many links on this topic and tried adding ContentType,dataType,processData parameters to the $.ajax() function but nothing helped.
What about this:
$( "#other").click(function() {
var json = [{"keycodec":68,"eventc":"keydown","timec":1392849542994}
,{"keycodec":65,"eventc":"keydown","timec":1392849543063},
{"keycodec":87,"eventc":"keydown","timec":1392849543084}];
$.ajax({
url: 'test.php',
type: 'POST',
data: "kite=" + JSON.stringify({ kite : json }),
success: function(msg){
alert(msg);
},
failure: function(errMsg) {
alert(errMsg);
}
});
});
And on your php code:
<?php
$obj=json_decode($_POST['kite']);
print_r($obj->{'kite'});
?>
Not in an elegant way on passing the json..
but this way you can still capture "kite" as post variable and decode your desired json string.

Categories