How do I access variables from PHP file using Ajax and JSON? (data is not defined error)

Question

I have this PHP file:

JSONtest.php

<?php
$a=5;
echo json_encode($a);
//This converts PHP variable to JSON.
?>

I want to alert this variable's value using Ajax and JSON, and for that I've written this script:

learningJSON.php

$(document).ready(function(){
    $("button").click(function(){
    $.ajax({
        url: 'JSONtest.php',
        type: 'POST',
        data: data,
        dataType: 'json',
        success: function(result){
            alert(result);
            },
        error: function(){
            alert("Error");
            }
        });
    });
});

But when I click the button, I get this error message: learningJSON.php:14 Uncaught ReferenceError: data is not defined

What wrong I'm doing? How can I fix this?

you need to define data variable within your ajax request. or at least put some dummy json there: `data: { param: 1 }` — mitkosoft, Mar 25 '16 at 07:49
[JSON](https://en.wikipedia.org/wiki/JSON) (JavaScript **Object** Notation) is for data **objects**. Scalar data (like number `5` in your example) are not JSON. — hindmost, Mar 25 '16 at 07:53

Hanky Panky · Accepted Answer · 2016-03-25T07:54:49.113

2

<?php
$a=5;
echo json_encode($a);
//This converts PHP variable to JSON.
?>

Nope, it doesn't. Whats the point in converting a simple number to JSON? It stays the number 5

Now the real problem. Yes your data variable is not defined anywhere in your JavaScript code. If you have no data to send, remove that parameter.

However if you still want to pass some data, define it accordingly then. For example

data: { fname: "John", lname: "Doe" }

Now let's say on your next exercise you want to post form data you can use this nice function named serialize(). This will take all the postable fields from your form and send them along with this request.

data : $("#formID").serialize()

edited Mar 25 '16 at 07:54

answered Mar 25 '16 at 07:49

Hanky Panky

46,730
8
72
95

it's for testing, I guess – Mauricio Florez Mar 25 '16 at 07:51
Actually I copied it from somewhere, so I didn't know about this thing. And thanks for that JSON thing. I got it. – Vikas Kumar Mar 25 '16 at 07:53
@Hanky thank you. Could you please find mistake in my another code? The image is not copied: Here's my code: http://stackoverflow.com/questions/36201036/why-isnt-the-image-not-copied-to-the-folder – Vikas Kumar Mar 25 '16 at 08:01
Can we pass a variable instead of JSON to php file? @Hanky – Vikas Kumar Mar 25 '16 at 08:47
It is received by PHP as standard POST variables, not as JSON – Hanky Panky Mar 25 '16 at 08:51

Mauricio Florez · Answer 2 · 2016-03-25T08:00:39.183

1

Data variable is not defined, you can delete that

Php file

<?php
$a = $_REQUEST['number'];
echo json_encode($a);
//This converts PHP variable to JSON.
?>

Javascript file

$(document).ready(function(){
    $("button").click(function(){
    $.ajax({
        url: 'JSONtest.php',
        type: 'POST',
        //data: {'number' : 10}, //this is when you need send parameters to the call, uncomment to send it parameters
        dataType: 'json',
        success: function(result){
            alert(result);
            },
        error: function(){
            alert("Error");
            }
        });
    });
});

edited Mar 25 '16 at 08:00

answered Mar 25 '16 at 07:50

Mauricio Florez

1,112
8
14

Thank you. It works. Now could you explain how do I send a value to same php file using same approach? – Vikas Kumar Mar 25 '16 at 07:54
could you please tell me what's wrong in my Ajax method? Here's my question: http://stackoverflow.com/questions/36201036/why-isnt-the-image-not-copied-to-the-folder – Vikas Kumar Mar 25 '16 at 08:00

score 0 · Answer 3 · edited Mar 25 '16 at 18:25

I think this one should be perfect for you. We need 3 files

index.php
login.js
login.php

That mean when user submit [index.php] script js file [login.js] running ajax process script [json] in login.js by collect all data from form input [index.php] and send and run script login.php ... This is powerful script of ajax & json

check code below

index.php

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="login.js" type="text/javascript" charset="utf-8">  </script>
</head>
    <body>      

        <form method="post" id="login" name="login">
            Email: <input type="email" id="log-mail" name="log-mail"  > <br />
            Password: <input type="password" id="log-pass" name="log-pass" > <br />
            <button type="submit" >Log in</button>
        </form>

    </body>
</html>

login.js

$(document).ready(function(){

    // #login = login is the name of our login form
    $('#login').submit(function(e) {
        $.ajax({
            type: "POST",
            url: "login.php",
            data: $('#login').serialize(),
            dataType: "json",
            success: function(msg){

                if(parseInt(msg.status)==1)
                {
                    window.location=msg.txt;
                }
                else if(parseInt(msg.status)==0)
                {
                    window.location=msg.txt;
                }                               
            }
        });
        e.preventDefault();

    });


});

login.php

<?php


    if(isset($_POST['log-mail']) && $_POST['log-mail'] != ''  && isset($_POST['log-pass']) && $_POST['log-pass'] != '' ) {  
        $_data_ = 'index.php?user_data='.$_POST['log-mail'];
        echo msg_result(1,$_data_);
    }else{
        $msg_att = "index.php?login_attempt=1";
        echo msg_result(0,$msg_att);   

    }



    function msg_result($status,$txt) {
        return '{"status":'.$status.',"txt":"'.$txt.'"}';
    }


?>

you can see on your url if you

complete all field => ...index.php?user_data=user_data@gmail.com
uncomplete => ...index.php?login_attempt=1

Hope this solve your issue

How do I access variables from PHP file using Ajax and JSON? (data is not defined error)

3 Answers3