jQuery AJAX Post Example with PHP and JSON

Today I'm gonna give you some code examples on how you can post a form and json data using jQuery AJAX. A PHP file will receive the posted data and print the response. I think this is one of the most useful code when you're coding with jQuery, especially if you're building a web app with modules that deals with so many forms or post request in one page.

 

To read more about this article Click Here

 

For Demo Click Here

 

To download files Click Here

jQuery Cascading DropDowns with PHP, Ajax and JSON

Cascading DropDowns is a jQuery plugin that implements dropdown lists in which contents of one list depends on the selection of another list. The plugin has right panel with items (any html structure), that depend on dropdown selected value and filtered on selection callback. The dropdowns work with json as data source (ajax or javascript array). The right panel items work with ajax or inline html as data source.

To read more about this article Click Here

For Demo Click Here

To download files Click Here

Teamwork Gantt - jQuery Component For Gantt Charts and Task Trees

Teamwork Gantt is a JavaScript component built on jQuery for creating Gantts, task trees, dependencies which exports the resulting data in JSON format.

Features:

• jquery based
• MIT licensed: you can reuse everywhere
• json import-export
• internationalizable
• manage task status –> project workflow
• manage dependecies
• manage assignements (resources, roles efforts)
• server synchronization ready
• full undo-redo support
• cross browser (at least for recent versions)

To read more about this article Click Here

For Demo Click Here 

To download files Click Here

Cleaver - Slideshows with HTML, JSON and jQuery

A command-line tool for generating HTML slideshows with JSON.Cleaver is a one-stop shop for generating HTML presentations in record time. Using only an intuitive JSON format, you can produce good-looking, interactive presentations without writing any code or placing a measly textbox.Cleaver produces a single document, output.html containg CSS and JavaScript (jQuery) code.

For Demo Click Here

To download files Click Here

Web Service Using PHP, MySQL, XML, and JSON

Today Web Services gain much popularity in web world. There are thousands of Web Services availble for updating E-Commerce, schools, stock market database etc. Actually Web services are just Web APIs that can be accessed over a network, such as Internet, and executed on a remote system hosting the requested services. There are three basic platform for We Services, these are SOAP, WSDL and UDDI.

Here we will discuss to create basic web service that provides an XML or JSON response using some PHP and MySQL.

The PHP / MySQL

/* require the user as the parameter */
if(isset($_GET['myuser']) && intval($_GET['myuser'])) {
$number_of_posts = isset($_GET['number']) ? intval($_GET['number']) : 20;
$format = strtolower($_GET['format']) == 'json' ? 'json' : 'xml';
$user_id = intval($_GET['myuser']);
/* connect to mysql database */
$link = mysql_connect('localhost','username','password') or die('Can not connect to the Database');
mysql_select_db('mydb_name',$link) or die('Can not select the Database');
/* select records from the database */
$query = "SELECT post_title, guid FROM posts WHERE wp_post_author = $user_id AND post_status = 'publish' ORDER BY ID DESC LIMIT $number_of_posts";
$result = mysql_query($query,$link) or die('Errant query:  '.$query);
/* create array of the records */
$posts = array();
if(mysql_num_rows($result)) {
while($post = mysql_fetch_assoc($result)) {
$posts[] = array('post'=>$post);
}
}
/* output in required format */
if($format == 'json') {
header('Content-type: application/json');
echo json_encode(array('posts'=>$posts));
}
else {
header('Content-type: text/xml');
echo '<posts>';
foreach($posts as $index => $post) {
if(is_array($post)) {
foreach($post as $key => $value) {
echo '<',$key,'>';
if(is_array($value)) {
foreach($value as $tag => $val) {
echo '<',$tag,'>',htmlentities($val),'</',$tag,'>';
}
}
echo '</',$key,'>';
}
}
}
echo '</posts>';
}
/* close database connection */
@mysql_close($link);
}

We will take the following sample URL for example:

http://mydomain.com/web-service.php?user=5&num=3

Below is the possible results of the above URL.
 

This is XML Output 

<posts>
<post>
<post_title>Now YouTube Video Player Uses HTML5</post_title>
<guid>http://www.phpzag.com/?p=1568</guid>
</post>
<post>
<post_title>PHP – Parse YouTube URLS</post_title>
<guid>http://www.phpzag.com/?p=1473</guid>
</post>
<post>
<post_title>What is HTML5?</post_title>
<guid>http://www.phpzag.com/?p=1399</guid>
</post>
</posts>

Now We will go for next sample URL for example:

http://mydomain.com/web-service.php?user=5&num=3&format=json

Now, we can take a look at the possible results of the URL.
 

The JSON Output

{"posts":[{"post":{"post_title":"Now YouTube Video Player Uses HTML5","guid":"http:\/\/phpzag.com\/?p=1568"}},{"post":{"post_title":"PHP – Parse YouTube URLS","guid":"http:\/\/phpzag.com\/?p=1473"}},{"post":{"post_title":"What is HTML5?","guid":"http:\/\/phpzag.com\/?p=1399"}}]}

XML-to-JSON convertor and remapper with jQuery

This is a jQuery plugin for converting data from XML to JSON format. However its real power lies in its ability to also remap data to a different structure. This can be useful when you have a plugin or application that requires JSON data, but the data is coming from an XML feed that you don’t have structural control over. Data is remapped to the structure you need.

To read more about this article Click Here

Make HTTP Requests Using Curl and Decoding JSON Responses in PHP

PHP has Curl library that let’s you communicate with other servers. The Curl libaray is enabled by installing cUrl extension in PHP.INI. You just need to uncomment “extension=php_curl.dll” in PHP.INI file to install Curl library.

 

As a php developer, sometimes we need to get data from other server or need to make request to other server like payment gateways integration, fetching catalog etc. By using Curl library, You can make http request to a server and get the required data.  you can also decode the JSON result with json_decode() function.

To read more about this article Click Here

 

ECommerce Menu Design with JSON Data and jQuery

This tutorial helps you to to speed up the most important product category navigation menu system for your ecommerce projects. I had implemented Amazon style menu with category image using PHP, MYSQL andj JQuery.

To read more about this article Click Here

For Demo Click Here

 

Load JSON data with jQuery, PHP and MySQL

This post shows how to populate a select box based on the value of the another, by getting JSON data with jQuery from a PHP script that gets the data from a MySQL database.

HTML Code

The initial HTML code looks like this:

<form>
    Fruit:
    <select name="name" id="fruitName">
        <option>Apple</option>
         <option>Orange</option
        <option>Banana</option
>> 
     <option>Pear</option>   
      </select>     Variety: 
</form>
    <select name="variety" id="fruitVariety"> 
 
    </select> 

The set of fruit names was already populated on the server-side and the default set of varieties could be too; I have chosen to populate them with Javascript in this example.  
 
jQuery Code
The jQuery code needs to initially populate the variety drop down based on the value of the fruit drop down. It then needs to update the variety if the fruit drop down changes.
Assuming the PHP script to fetch the fruit is at /fruit-varieties.php do this:
 
function populateFruitVariety() {
   
$.getJSON('/fruit-varities.php', {fruitName:$('#fruitName').val()}, function(data) {    
   
       var select = $('#fruitVariety');
        var options = select.attr('options');
           options[options.length] = 
        $('option', select).remove();
 
       $.each(data, function(index, array) { 
    new Option(array['variety']);         });  
populat
    });  }  $(document).ready(function() {     eFruitVariety(); 
 
 $('#fruitName').change(function() {   populateFruitVariety();  });   
 
});
 
The "$.getJSON('/fruit-varities.php', {fruitName:$('#fruitName').val()}" line is what retrieves the data and it passes the currently selected fruit name value as part of the get string to the PHP script.  
 
PHP Code
The PHP script connects to the database, retrieves the data for the selected fruit name and then returns it as a JSON encoded string.
 
$dsn = "mysql:host=localhost;dbname=[DATABASE NAME HERE]";
$username = "[USERNAME HERE]";
 $pdo = new PDO($dsn, $usernam
$password = "[PASSWORD HERE]";
e, $password);  
{     $stmt = $p
$rows = array(); if(isset($_GET['fruitName']))
 do->prepare("SELECT variety FROM fruit WHERE name = ? ORDER BY variety");
    $stmt->execute(array($_GET['fruitName'])); 
} echo json_encode($rows);
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
 
Caching issues
Internet Explorer and Firefox will cache the subsequent requests made to the same fruit name but the other browsers won't, requesting them again each time.   
 
Further reading
I haven't written much in the way of comments for each of the above code snippets; they've all been covered to some degree in previous posts which led up to this one. Please refer to these in the  "Related Posts" list below.

Creating and Parsing JSON data with PHP

 I’m going to tell you something about JSON data and how we can handle them via PHP. Although, JSON stands JavaScript Object Notation, it is used by many other technologies like PHP and Java for data interchange format over the Internet.

What is JSON?

JSON is ultra-weight data interchange data format used over the internet for transferring the data. While XML is a dominant data interchange format over the internet but JSON is less complex and light-weight data.

Though it was first made to be used with JavaScript for accessing remote data, it is now used by many other languages because JSON data is platform independent data format.

Data Types and Example of JSON data

JSON supports various kind of data types which included numbers, strings, booleans as well as array datas and obviously object (collection of key:value pairs, comma-separated and enclosed in curly brackets).

Now, let’s look at the example of simple format of JSON data for a detail of a employee,

{"id":"1","name":"mike","country":"usa","office":["microsoft","oracle"]}

Creating and Parsing JSON data format in PHP

To handle JSON data there is JSON extension in PHP which is aviable after PHP 5.2.0. Two funcitons :json_encode() and json_decode() are very useful converting and parsing JSON data through PHP.

First of all, let’s look at the PHP code to create the JSON data format of above example using array of PHP.

$json_data = array ('id'=>1,'name'=>"mike",'country'=>'usa',"office"=>array("microsoft","oracle"));

echo json_encode($json_data);

The above code generates the JSON data exactly as above. Now, let’s decode above JSON data in PHP.

$json_string='{"id":1,"name":"mike","country":"usa","office":["microsoft","oracle"]} ';

$obj=json_decode($json_string);

Now, the $obj variable contains JSON data parsed in PHP object which you can display using code below.

echo $obj->name; //displays mike

echo $obj->office[0]; //displays microsoft

As you can guess,$obj->office is an array and you can loop through it using foreach loop of PHP,

foreach($obj->office as $val)

    echo $val;