Tuesday, February 16, 2016

Passing an array from PHP to Javascript using JQuery & JSON



Step 01 -:

Create a php file named exampleJsonArray.php and copy & paste below code to that

<html>
<title> Easy Way For Codings</title>
<header> 
<h1>--- Easy Way For Codings PHP example ---</h1> 
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> 
<script>

function onClick()
{
var ajaxurl = 'examplePHPCode.php';
            
            data =  {'action':'getCountryList'};
            
            $.post(ajaxurl, data, function (response) {
               
               var responses = jQuery.parseJSON(response);
  var countries = "";
  for (var s in responses){                   
                    
countries += responses[s][0] +"   "+ responses[s][1]+"\n";

               }
  alert(countries);            
            
});
}

</script>
</header>
<body>
<button type="button" onClick="onClick()">Show Country List</button>
</body>
</html>

Step 02 -:

Create a another php file named examplePHPCode.php and copy & paste below code to that

<?php
if (isset($_POST['action'])) {
    switch ($_POST['action']) {
        case 'getCountryList':
            getCountryList();
            break;
                  
    }
}

function getCountryList()
{
    $countryList = array();
    
    $country = array("1000","Sri Lanka");
    array_push($countryList, $country);                         
    $country = array("2000","India");
    array_push($countryList, $country);       
    $country = array("3000","USA");
    array_push($countryList, $country);       
    $country = array("4000","UK");
    array_push($countryList, $country);       
    $country = array("5000","Australia");
    array_push($countryList, $country);       
    $country = array("6000","Indonesia");
    array_push($countryList, $country);       
    $country = array("7000","China");
    array_push($countryList, $country);       

    echo json_encode($countryList);                          
    exit;
}
?>

Final Result -:



Download Source Code



Access PHP code through Jquery



Step 01 -:

Create a php file named example.php and copy & paste below code to that

<html>
<title> Easy Way For Codings</title>
<header> 
<h1>--- Easy Way For Codings PHP example ---</h1> 
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> 
<script>

function onClick()
{
var ajaxurl = 'examplePHPCode.php';
            
            data =  {'action':'getModifiedName', 'name': $('#txtname').val()};
            
            $.post(ajaxurl, data, function (response) {
               
               alert(response);

            });

}
</script>
</header>
<body>
 Enter Value Here: <input type="text" name="txtname" id="txtname"><br><br>
<button type="button" onClick="onClick()">Click Me !</button>
</body>
</html>

Step 02 -:

Create a another php file named examplePHPCode.php and copy & paste below code to that

<?php
if (isset($_POST['action'])) {
    switch ($_POST['action']) {
        case 'getModifiedName':
            getModifiedName($_POST['name']);
            break;
                  
    }
}

function getModifiedName($name)
{
echo 'Welcome '.$name;
}

?>

Final Result -:

Download Source Code