How can I send JSON data from a PHP script to be used by jQuery?

Question

I have a problem with some JSON data. I don't know how to take some data generated in PHP and turn that into something that I can use in my jQuery script. The functionality I need is this: I need to be able to click on images on the page, and depending on the selected element, I need to show results from my DB.

Here's the HTML page that I've got:

<html>
  <head>
  <title>pippo</title>
  <script><!-- Link to the JS snippet below --></script>
  </head>
  <body>
    Contact List:
    <ul>
      <li><a href="#">
        <img src="contacts/pippo.png" onclick="javascript:change('pippo')"/>pippo
      </a></li>
      <li><a href="#">
        <img src="contacts/pluto.png" onclick="javascript:change('pluto')"/>pluto
      </a></li>
      <li><a href="#">
        <img src="contacts/topolino.png" onclick="javascript:change('topolino')"/>topolino
      </a></li>
    </ul>
  </body>
</html>

Here's PHP code being called:

<?php
include('../dll/config.php');

$surname = $_POST['surname'];

$result = mysql_query("select * from profile Where surname='$surname'") or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
    $_POST['name'] = ucfirst($row['name']);
    $_POST['tel'] = $row['telephone'];
    $_POST['companymail'] = $row['companymail'];
    $_POST['mail'] = $row['email'];
    $_POST['fbid'] = $row['facebook'];
}
?>

Here's the Ajax JavaScript code I'm using:

<script type="text/javascript">
    function change(user) {
        $.ajax({
            type: "POST",
            url: "chgcontact.php",
            data: "surname="+user+"&name=&tel=&companymail=&mail=&fbid",
            success: function(name,tel,companymail,mail,fbid){
                alert(name);
            }
        });
        return "";
    }
</script>

Someone told me that this JS snippet would do what I want:

$.getJSON('chgcontact.php', function(user) {
    var items = [name,surname,tel,companymail,email,facebook];
    $.each(user, function(surname) {
        items.push('surname="' + user + "'name='" + name + "'telephone='" + telephone + "'companymail='" + companymail + "'mail='" + mail + "'facebook='" + facebook);
    });
    /*
    $('<ul/>', {
        'class': 'my-new-list',
        html: items.join('')
        }).appendTo('body');
    */
});

But it is not clear to me - I don't understand how I need to use it or where I should include it in my code.

Your PHP script does nothing. $_POST['tel']=$row['telephone']; says you want to overwrite submitted data with data from a column in the database, that's it. you need an echo or something to show the data. right now your just moving data around. — Cjueden
– Cjueden, Commented Feb 7, 2012 at 19:30

Brian Driscoll · Accepted Answer · 2012-02-07 19:31:24Z

2

You will have to create a proper JSON string in your PHP script, and then echo that string at the end of the script.

A simple example:

$person = new stdClass;

$result = mysql_query("select * from profile Where surname='$surname'")
or die(mysql_error());
while ($row = mysql_fetch_array( $result )) {
    $person->name = ucfirst($row['name']);
    $person->tel = $row['telephone'];
    $person->companymail = $row['companymail'];
    $person->mail = $row['email'];
    $person->fbid = $row['facebook'];
}
echo json_encode($person);

answered Feb 7, 2012 at 19:31

Brian Driscoll

19.7k3 gold badges51 silver badges66 bronze badges

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

Comments

Billy Moon · Accepted Answer · 2012-02-07 19:41:42Z

There are several problems with your code I have tried to explain via the corrected and commented code here:

HTML & JavaScript

<html>
<head><title>pippo</title>
<!-- added link to jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- javascript can go here -->
<script type="text/javascript">
    $.ajax({
        type: "POST",
        url: "chgcontact.php",
            // use javascript object instead of `get` string to represent data
        data: {surname:user, name:'', tel:'', companymail:'', mail:'', fbid:''},
        success: function(data){
                // removed name,tel,companymail,mail,fbid
                alert(JSON.parse(data));
            }
        });
        return "";
    }
</script>
</head>
<body>
Contact List:
<ul>
<!-- removed `javascript` form onclick handler -->
<li><a href="#"><img src="contacts/pippo.png" onclick="change('pippo')"/>pippo</a></li>
<li><a href="#"><img src="contacts/pluto.png" onclick="change('pluto')"/>pluto</a></li>
<li><a href="#"><img src="contacts/topolino.png" onclick="change('topolino')"/>topolino</a></li>
</ul>
</body>
</html>

PHP

<?php

    $surname = $_POST['surname'];

    $result = mysql_query("select * from profile Where surname='$surname'")
    or die(mysql_error());

    while ($row = mysql_fetch_array( $result )){

        // create data object
      $data = new stdClass();

      // add values to data object
        $data->name = ucfirst($row['name']);
        $data->tel = $row['telephone'];
        $data->companymail = $row['companymail'];
        $data->mail = $row['email'];
        $data->fbid = $row['facebook'];

        // send header to ensure correct mime type
        header("content-type: text/json");

        // echo the json encoded data
      echo json_encode($data);

    }

?>

All code is untested, but you should be able to see what I have done at each step. Good luck.

Thank you very much programmers, and especially to Billy Moon. I've only one question about the last step of json query, when you use JSON.parse(data), i've an error when i try to compile the page: JSON.parse: unexpected character alert(JSON.parse(data)); I think the problem is releated with the array recived in data, because it isn't a string, but a complex object. Could you help me again? Thanks in advance Billy
actually, I think you need to use JSON.stringify() instead of JSON.parse() as you are trying to alert the result. I think I got confused before and put the wrong method.
i've use now data.name and i have solve, it work perfectly, thank you very much, you have solve this bug, i've work about it, around 3 weeks XD

amlane86 · Accepted Answer · 2012-02-07 19:45:14Z

And to expand on Brian Driscoll's answer. You will need to use the user.name format to access the name field from the returned $.getJSON("blah", function(user){});

so...

items.push('surname="'+user+"'name='"+user.name+"'telephone='"+user.telephone+"'companymail='"+user.companymail+"'email='"+user.email+"'facebook='"+user.facebook+);

In this format that you have created it will just push a long ugly looking string so you might want to spend some time making it look better. Good luck!

Matt H · Accepted Answer · 2012-02-09 19:13:37Z

0

JSON that is POSTed to a PHP page generally isn't in the $_POST variable, rather it is in $HTTP_RAW_POST_DATA.

answered Feb 9, 2012 at 19:13

Matt H

6,5502 gold badges32 silver badges34 bronze badges

Collectives™ on Stack Overflow

How can I send JSON data from a PHP script to be used by jQuery?

4 Answers 4

Comments

HTML & JavaScript

PHP

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

HTML & JavaScript

PHP

3 Comments

Comments

Comments

Related