Ajax + PHP: null instead of an array

Question

Ajax call is made in the background

var signupValidate = function(elementID){
  var value = $('#' + elementID).val();
  if (value !== ''){
    $('#'+elementID+'-status').css("background-image", "url(img/signup/spinner.gif)");
    var data = {elementID: value};
    var json = JSON.stringify(data);
    $.ajax({
      url: 'php/validator_signup.php',
      dataType: 'json',
      type: 'post',
      data: json,
      success: function(data){
        var parsedResponse = JSON.parse(data);
        console.log(parsedResponse);
        /*
                if(data.response === 1){
                    $('#'+elementID+'-status').css("background-image", "url(img/signup/no.png)");
                }else if(data.response === 0){
                    $('#'+elementID+'-status').css("background-image", "url(img/signup/yes.png)");              }
            */
      }

    });
  }
}

validator_signup.php received the call. So far in test mode PHP will receive the string, parse it and encode again to return to JS:

$post = $_POST['data'];
$data = json_decode($post, true); //decode as associative array
$details = $data[0];
echo json_encode($details);

JS then needs to print this in console.

I get this:

null

instead of the value which I expect back.

Result is same whether I parse returned data or not.

If I understand it correctly, the problem is on PHP side?

A bigger question is why are you using JSON.stringify to pass data? Depending on what you are doing, there is no reason to use JSON.stringify nor JSON.parse. — Mikey
– Mikey, Commented Jun 16, 2016 at 15:19
Please clarify if elementID is suposed to be sent to php, because currently you are (attempting) to send a key value pair, with the key being the literal string elementID. — Steve
– Steve, Commented Jun 16, 2016 at 16:01
@Stave Javascript function takes the argument (string). Function is called through the attribute of an HTML element like this: onblur="signupValidate('signupUsername')". I might bing it via jquery later on, so far attributes are good. — Vadimster
– Vadimster, Commented Jun 16, 2016 at 16:03

Steve · Accepted Answer · 2016-06-16 16:15:19Z

2

There does not appear to be any value in converting to json when your data is so simple, you can just use a regular js object that jquery will convert to form data.

Also, as both the key and value you send are unknown, i would suggest sending the data in a different structure so its easy to retrieve:

var signupValidate = function(elementID){
  var value = $('#' + elementID).val();
  if (value !== ''){
    $('#'+elementID+'-status').css("background-image", "url(img/signup/spinner.gif)");

    $.ajax({
      url: 'php/validator_signup.php',
      type: 'post',
      //      ▼key   ▼value     ▼key  ▼value
      data: { id:    elementID, val:  value},
      success: function(response){
        console.log(response.message);
      }

    });
  }
}

In php you can access the data via $_POST, and as you know the keys, its simple:

<?php

$id = $_POST['id'];
$val = $_POST['val'];

//set correct header, jquery will parse the json for you
header('Content-Type: application/json');
echo json_encode([
    'message'=>'Request received with the id of: ' . $id . 'and the value of: ' . $val,
]);
die();

answered Jun 16, 2016 at 16:15

Steve

20.5k5 gold badges47 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mikey Over a year ago

I think this what the OP wants. Though, no need to die().

Vadimster Over a year ago

@Steve I favour this approach more for some reason, this is in line with how I see this happening. My first mistake was that I missed the right way to create the data variable in the client, it should of course be var data = {id: elementID, val: value}; Now in Network I see the data passed as it should be to the php: id:signupUsername val:test. I still do not stringify it, should I? I will post server code in next comment.

Vadimster Over a year ago

@Steve PHP: I create a template array which I intent to update and return to Javascript: $json = array("response" => 1);. I intend to take the id value and return it in the response by doing this: $id = $_POST['id']; $json[0] = $id; echo json_encode($json);. Javascript console gives me this, however: Object {0: "signupUsername", response: 1}. I am not quite following what is happening, as I expect to a) rewrite response value in the php array to the id value and return that value.

Vadimster Over a year ago

@Steve I can see in Network, that response passed back to JS is {"response":"signupUsername"}. If I JSON.parse the response from PHP and output to console log, I get the following VM380:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1

Steve Over a year ago

@Vadimster i have left the office and am typing from my phone so i cant really help at the moment, ill check back tomorrow and if you are still stuck will try and provide some more information

|

Derek Pollard · Accepted Answer · 2016-06-16 15:22:30Z

1

Change:

data: json,

To:

data: { data: json},

This is because you aren't giving the sent data a POST parameter to then be used server side to retrieve it.

Then, you can simply fetch the code server-side like this:

$data = json_decode($_POST['data']);

Hope this helps!

edited Jun 16, 2016 at 15:22

answered Jun 16, 2016 at 15:20

Derek Pollard

7,1956 gold badges45 silver badges62 bronze badges

4 Comments

Praveen Kumar Purushothaman Over a year ago

Yup... This is the same thing I said as well. :) Looks like this can be an alternate of what I gave. :D

Mohamed Belal Over a year ago

well this one could work too :D even though not full JSON solution

Mohamed Belal Over a year ago

if you are going to use this solution then change the dataType in the ajax call too because this is not a full JSON solution the data which being sent to the script isn't fully JSON

Derek Pollard Over a year ago

@MohamedBelal - this is data being sent to the server, the dataType attribute is used for the data that is returned from the server.

Praveen Kumar Purushothaman · Accepted Answer · 2016-06-16 16:35:27Z

1

Here, since you are checking whether data is being post, if you see in Network, no data is being posted. To fix it, change this part:

var data = {elementID: value};

To this:

var data = {data: {elementID: value}};

Consider removing conversion of Data

PHP automatically handles the $_POST as an array! So you don't need to use the reconversion. Please eliminate this part:

var json = JSON.stringify(data);  // Remove this.

And in the server side:

$data = json_decode($post, true);   // Remove this
$data = $_POST['data'];             // Change this

Update

OP said data[elementID]:gh is sent to the PHP file.

If this is the case, then if the data needs to be "gh" in JSON, then:

$res = $_POST["elementID"];
die(json_encode(array("response" => $res)));

This will send:

{
  "response": "gh"
}

And in the client side, you don't need anything other than this:

$.post('php/validator_signup.php', function (data) {
    var parsedResponse = JSON.parse(data);
    console.log(data);
});

edited Jun 16, 2016 at 16:35

answered Jun 16, 2016 at 15:16

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

11 Comments

Steve Over a year ago

This solves half of the problem, the php will still fail (there is no element in the array with a key of 0).

Steve Over a year ago

And considering the number of upvotes, it would probably be helpfull if you addresses the needless json conversion in the js. Simply send form data, that php can handle directly

Praveen Kumar Purushothaman Over a year ago

@Steve Definitely... Will do that.

Steve Over a year ago

The more i look at the OPs question, the more bugs i see. Unless the OP comes back and engages with us, its not really possible to guess what they are trying to do unfortunatly

Vadimster Over a year ago

I adjusted client and server code as advised, still null is returned :(

|

Mohamed Belal · Accepted Answer · 2017-11-06 07:47:36Z

0

JSON data is sent to the server as a raw http input it is not associated with query name like $_POST['data'] or anything like that which means you must access the input string not a data post value to do so you need to use

$rawInput = json_decode(file_get_contents('php://input'), true);
$elementValue = $rawInput['elementId'];

thats it

edited Nov 6, 2017 at 7:47

answered Jun 16, 2016 at 15:27

Mohamed Belal

6227 silver badges11 bronze badges

Comments

Praveen Kumar Purushothaman · Accepted Answer · 2016-06-16 16:56:42Z

-3

$_POST = json_decode(file_get_contents('php://input'), true); 
$data = $_POST['data'];

edited Jun 16, 2016 at 16:56

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

answered Jun 16, 2016 at 15:19

user3030546

434 bronze badges

1 Comment

Praveen Kumar Purushothaman Over a year ago

So what do you mean? Can't you explain?

Collectives™ on Stack Overflow

Ajax + PHP: null instead of an array

5 Answers 5

8 Comments

4 Comments

11 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

4 Comments

11 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related