CODEWITHSUNDEEP
javascriptjqueryajax
Kenneth Ma
Kenneth Ma

Reputation: 77

how to retrieve data through ajax?

I want a user to input a country, then it will output its population. My javascript is suppose to look up the country that the user input when the button is clicked, then goes through the PHP file and gets the country's population.

my HTML is:

  <label>
    Country:
      <input name="country" type="text" id="country"></label>
      <input type="button" value="Find population" id="findPop">
  <p id="output"></p

and javascript:

var countryFound = function(data) {
    var theCountry = $("#country").val();
    var population = data["country"];
    if (data["country"])
    {
        $("#output").html(theCountry + " population is " + population);
    }
    else {
        $("#output").html(theCountry + " is not found");
    }
};

$("#findPop").click(function(){
    var theCountry = $("#country").val();
    $("#output").html("Loading...");
    $.getJSON("countrylookup.php", "country="+theCountry , countryFound);  
});

my PHP code is:

if (isset($_GET['country'])) { // get the parameters country
    $column = 'country';
    $value = $_GET['country'];
else {
    print -1; // an error code
    return; 
}

$data = array( 'country'=>'Peru', 'capital'=>'Lima', 'area'=>'1285220', 'population'=>'29907003', 'continent'=>'South America' ),
array( 'country'=>'Philippines', 'capital'=>'Manila', 'area'=>'300000', 'population'=>'99900177', 'continent'=>'Asia' );
function findData ( $whichColumn, $data, $searchValue)
{
    $result = array();
    foreach ($data as $row) {
        if ($row[$whichColumn] == $searchValue)
            $result[] = $row;
    }
    return $result;
}

print json_encode ( findData($column, $data, $value) );

but for some reason, when I input Peru as the country, it says Peru is not found. Am I not retrieving the correct data from the php or what? I'm pretty sure that my php code is correct.

Upvotes: 1

Views: 166

Answers (3)

vortex7
vortex7

Reputation: 381

There is a } missing before the else in the fourth line of the PHP code.

Upvotes: 0

adeneo
adeneo

Reputation: 318182

Here's how I'd do it :

$(function() {
  $("#findPop").on('click', function(){
    var theCountry = $("#country").val();
    $("#output").html("Loading...");
    $.getJSON("countrylookup.php", {country: theCountry}, function(data) {
       var population = data[0] != "false" ? data.population : false,
           msg = population ? (" population is " + population) : " is not found";
       $("#output").html(theCountry + msg);
    });
  });
});

PHP

$value = isset($_GET['country']) ? strtolower(trim($_GET['country'])) : false;
$result = false;

if ($value) {
    $data = array(
          'peru' => array(
                          'capital'=>'Lima',
                          'area'=>'1285220',
                          'population'=>'29907003',
                          'continent'=>
                          'South America'
                    ),
    'philippines' => array(
                          'capital'=>'Manila',
                          'area'=>'300000',
                          'population'=>'99900177',
                          'continent'=>'Asia'
                    )
    );
    if (array_key_exists($value, $data)) $result = $data[$value];
}
echo json_encode($result);

Upvotes: 1

Terry
Terry

Reputation: 66103

For the jQuery side, I recommend using the .get() function.

$("#findPop").click(function(){
    var theCountry = $("#country").val();
    $("#output").html("Loading...");
    $.get("countrylookup.php", function(data) {
        if(data) {
            // Do whatever you want to do with the data, e.g.:
            var population = data.population,
                theCountry = $("#country").val();

            // Do more magic
            $("#output").html(theCountry = " population is " + population)
        } else {
            // Error handling
        }
    });  
});

Upvotes: 0

Related Questions