CODEWITHSUNDEEP
phpjavascriptjqueryjson
GeekedOut
GeekedOut

Reputation: 17185

How to return an encoded JSON string to jQuery call?

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!!

Upvotes: 0

Views: 4919

Answers (3)

Nishu Tayal
Nishu Tayal

Reputation: 20840

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.`
               }

            }
        });

Upvotes: 2

Rafay
Rafay

Reputation: 31043

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);

Upvotes: 2

aziz punjani
aziz punjani

Reputation: 25776

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.

Upvotes: 1

Related Questions