如何将编码的JSON字符串返回给jQuery调用？

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

Answer 1

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

Answer 2

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. ie

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

            }
        });       

Answer 3

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.