Get data from PHP file using AJAX

Question

I'm trying to get some data from a PHP file using AJAX but I get only an error:

Uncaught TypeError: Cannot read property 'protocole' of null

protocoleGenerator.php

<?php    
    $array = array(
        'protocole' => '1029384756',
    );
    echo json_encode($array);
?>

script.js

function getDemoProtocol() {
    $.ajax({
        url: 'protocoleGenerator.php',       
        data: "",
        dataType: 'json', //data format      
        success: function (data) {
            var protocole = data['protocole'];
            console.log("Prot: " + protocole);
        }
    });
}

What is wrong here?

Have you checked what the exact response is using the network tab of the console? — Rory McCrossan
– Rory McCrossan, Commented Feb 4, 2016 at 14:28
Is script.js and protocoleGenerator.php in the same directory? — ksealey
– ksealey, Commented Feb 4, 2016 at 14:35
Can you see what the responseText is? console.log(data) would help too. — Rory McCrossan
– Rory McCrossan, Commented Feb 4, 2016 at 14:42
@andre3wap it's not a CORS issue if success is already being triggered. That header will be of no benefit — charlietfl
– charlietfl, Commented Feb 4, 2016 at 14:42
The issue is originating from somewhere else, your included code runs flawlessly here. — John Weisz
– John Weisz, Commented Feb 5, 2016 at 10:36

Wizard · Accepted Answer · 2016-02-04 21:55:52Z

0

I can't comment for now :( and write my suggestions as an answer. It seems like you have mistype in protocoleGenerator.php. May be end line looks like echo json_encode($aray);, in this case json_encode() returns pure null (if you have disable php notices). The success function receives null and can't get a property from this object. It's only my subjective suggestion. It may be wrong.

P.S: You can get value / call function as Object.my_fun(), or Object['my_func']() - for this particular case it doesn't matter how did you access to the variable. For example:

   var o = {};
   o.test = 'my test value';
   o.fff = function() {return 'fff called.';};
   console.log('dot-style:' + o.test);
   console.log('arr-style:' + o['test']);
   console.log('dot-style:' + o.fff());
   console.log('arr-style:' + o['fff']());

Ok, I've got a minus. If assumed, that topic starter show us hard copy-paste of his code, here is no issues. My suggestion based on the error message - the "success function" gets HTTP/200 answer from the server with text "null". With empty or non-valid json response jquery-ajax calls an "error handler". I'm sure that it can't be caused by json_encode() behaviour - my example above prove it.

Another suggestion is specific server config, rewrites, redirects or something else. But I've exclude this suggestion.

Oh...

<?php
$array = array(1,2);
$аrray = array(3,4);
var_dump($array);
var_dump($аrray);

result looks like that:

array(2) {
  [0] =>
  int(1)
  [1] =>
  int(2)
}
array(2) {
  [0] =>
  int(3)
  [1] =>
  int(4)
}

Did you see the difference? I don't, but the second $array begins from cyrillic character.

edited Feb 4, 2016 at 21:55

answered Feb 4, 2016 at 15:02

Wizard

8726 silver badges9 bronze badges

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

4 Comments

cFreed Over a year ago

Your answer is the only pertinent. Look at my comment under the OP. I don't understand why somebody downvoted it. I upvote to compensate.

Wizard Over a year ago

Thanks for support, @cFreed. Now I have some interest to know what kind of bug it is/was here. Another suggestion: topic starter has two or more copies of protocoleGenerator.php at different locations or has mistype in the filename.

Wizard Over a year ago

@FlashThunder, I haven't any issues neither v1.12 nor 1.8.3 or 3.0.0beta jQuery.. HTTP/404 makes jQuery to call an 'error handler'. In this case existence of header 'Content-Type' doesn't matter, although I will set it up in my project.

Wizard Over a year ago

Ouch, I mean that 'Content-Type' header can have any valid value, like text/html or even text/plain instead of application/json

Raju Dudhrejiya · Accepted Answer · 2016-02-05 10:30:43Z

I run your code in my localhost, it's working fine please check below code in your system, if you still get any error then post your whole code so I can check in my system.

index.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Json</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
    function getDemoProtocol() {
        $.ajax({
            url: 'protocoleGenerator.php',       
            data: "",
            dataType: 'json', //data format      
            success: function (data) {
                var protocole = data['protocole'];
                console.log(protocole);
                alert(protocole);
                console.log("Prot: " + protocole);
            }
        });
    }
    getDemoProtocol();  // Javascript method

    // Jquery Method
    $(function (){
        $.ajax({
            url: 'protocoleGenerator.php',       
            data: "",
            dataType: 'json', //data format      
            success: function (data) {
                console.log(data);
                var protocole = data.protocole;
                console.log("Prot: " + protocole);
            }
        });
    });
</script>
</head>

<body>
</body>
</html>

protocoleGenerator.php

<?php 
header('Content-Type: application/json');  
$array = array(
    'protocole' => '1029384756',
);
echo json_encode($array);
?>

Flash Thunder · Accepted Answer · 2016-02-05 10:46:40Z

0

This is because you are getting Error 404: not found. Check console (tick the log XHR requests checkbox).

The solution would be, changing this:

url: 'protocoleGenerator.php',

to this:

url: './protocoleGenerator.php',

Working example:

http://neolink.dyndns.org:81/stackoverflow/1.php

PS. This is weird that jQuery runs success function even when response was 404.

PS 2. If it won't work (it should!), give the full path instead (like http://blabla.com/1/3/45345/protocoleGenerator.php, as that may be server dependable)

edited Feb 5, 2016 at 10:46

answered Feb 5, 2016 at 10:41

Flash Thunder

12.1k10 gold badges55 silver badges103 bronze badges

Collectives™ on Stack Overflow

Get data from PHP file using AJAX

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related