How to return an encoded JSON string to jQuery call?

Question

I do something like this in my PHP AJAX:

$rows = array();
while($r = mysql_fetch_assoc($sth)) 
{
    $rows[] = $r;
}
print json_encode($rows);

My calling JavaScript code is like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript" >
$(function()
{
    $("input[type=submit]").click(function()
    //$("input[type=button]").click(function()
    {
        var name = $("#problem_name").val();
        var problem_blurb = $("#problem_blurb").val();

        var dataString = 'problem_name='+ name + '&problem_blurb=' + problem_blurb;

        if(name=='' || problem_blurb == '')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "/problems/add_problem.php",
                data: dataString,
                success: function()
                {
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }

        return false;
    });
});
</script>

How can I transfer the encoded JSON back to the jQuery call, decode it, and output that data? And would it be better to have just looped through the data myself and made the JSON code by concatinating the string together?

Thanks!!

Rafay · Accepted Answer · 2011-09-23 21:59:33Z

2

set the dataType:'json' so you dont need to parse the json

$.ajax({
 type: "POST",
 dataType:'json',  <----
 url: "/problems/add_problem.php", <---- here you call the php file
 data: dataString,
 success: function(data)  <--- here the data sent by php is receieved
 {
  // data will contain the decoded json sent by server 
  // you can do data.property that depends upon how the json is structured
  $('.success').fadeIn(200).show();
  $('.error').fadeOut(200).hide();
 }
});

add_problem.php

$name=$_POST['problem_name']; // get the name here
$desc=$_POST['problem_blurb']; //get the description here 
$rows = array();
//fetch data from DB
while($r = mysql_fetch_assoc($sth)) 
{
    $rows[] = $r;
}
print json_encode($rows); //json encode it and send back to ajax success handler 
//or
//echo json_encode($rows);

edited Sep 23, 2011 at 21:59

answered Sep 23, 2011 at 21:46

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

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

4 Comments

GeekedOut Over a year ago

Yeah but how do I get it to be in that data variable? What do I have to do on the php side?

Rafay Over a year ago

you dont have to do any thing its already being done, when the php file which is called by ajax in your case it is add_problem.php, it echos or prints the response, in your case json_encode($rows);, the encoded json is recieved in the parameter specified in the success handler function (data), and if you have spcified the dataType:'json' it will be automatically parsed, all you have to do is traverse it and display it

jfriend00 Over a year ago

Or you can use $.getJSON() instead of $.ajax() and the dataType is already set to json for you.

Rafay Over a year ago

P.S. $.getJSON uses GET HTTP request, if GET or POST is not the issue $.getJSON is a better option

Nishu Tayal · Accepted Answer · 2011-09-27 18:27:33Z

jQuery.getJSON and $.ajax have some parameters, that are passed as per need. "data : JSON" expects output to be in json format. And when you need output, you need to pass a variable in success handler. i.e.

$.ajax({   
            type: "POST",         
            url: "/problems/add_problem.php",  
            data: JSON,  `datastring is replaced by JSON datatype`
            success: function(data)  `data is json object that will contain the jsonencoded output returned from add_problem.php`
            {  
               for(var i in data)
               {
                   console.log(data[i]) `returns the data at i'th index.`
               }

            }
        });

aziz punjani · Accepted Answer · 2011-09-23 21:47:44Z

1

Just do it in your callback function

        $.ajax({
            type: "POST",
            url: "/problems/add_problem.php",
            data: dataString,
            success: function( data )
            {
                foreach( var i in data ) 
                 // do something 
            }
        });

It's better to json encode it on the server side because it's easier to work with json on the client side.

answered Sep 23, 2011 at 21:47

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

2 Comments

GeekedOut Over a year ago

What I am confused about is how to get the encoded JSON string to be in that "data" variable. Do I have to return it somehow? Currently I don't do anything with it on the PHP side. How do I get it to be in that data variable?

aziz punjani Over a year ago

You can call it anything, it doesn't have to be data, basically JQuery captures the response text from the ajax request and sends it to your callback function, passing the json response as an argument.

Collectives™ on Stack Overflow

How to return an encoded JSON string to jQuery call?

3 Answers 3

4 Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Related