jQuery Ajax Methods to display JSON data
Written by Saran on January 12, 2011, Updated May 11, 2018Method 1 (Using getJSON)
This method loads JSON encoded data from server using GET HTTP request. Using JSON data structure this example simply sets the content of specified elements with JSON values.JQUERY
- 1
- 2
- 3
- 4
- 5
$.getJSON("process.php", function(response) {
$('#result').html(response.first);
$('#result2').html(response.second);
$('#result3').html(response.third);
});Method 2 (Using jQuery Ajax)
This is similar to method above, but here we can specify additional options before sending ajax requests. Click here to see all the options you can set.JQUERY
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery.ajax({
url: "process.php",
dataType:'json',
success:function(response)
{
$('#result').html(response.first );
$('#result2').html(response.second );
$('#result3').html(response.third);
}
});PHP process.php File
This PHP file generates JSON encoded data from random strings provided in array.JQUERY
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
<!--?php <br ?--> //List of strings in array
$myarry= array("Proin rutrum euismod lorem, eget auctor nisl porta vel.", "Nullam pellentesque pretium ante, eu vulputate ante ullamcorper vitae.", "In lorem sem, malesuada vel aliquet mattis, scelerisque id augue.","Vestibulum egestas dolor et orci ultricies malesuada.", "Phasellus venenatis sagittis mi, sit amet blandit ante semper a. ", "Maecenas eleifend ante in libero mollis ornare.","Morbi ligula orci, pulvinar ut feugiat vitae, convallis commodo erat", "Phasellus feugiat dui ac eros ornare condimentum. Sed dictum, purus quis blandit adipiscing", "uspendisse potenti. Sed fermentum bibendum enim at consectetur.","Duis at lacus diam. Maecenas sollicitudin sodales semper.", "lobortis vitae, interdum vitae libero. Ut sit amet elit ipsum", "Sed fermentum bibendum enim at consectetur. Sed non diam a orci sagittis varius.");
//randomize strings
$randomize1 = array_rand($myarry);
$randomize2 = array_rand($myarry);
$randomize3 = array_rand($myarry);
//prepare output array
$myvals = array('first'=>'1.'.$myarry[$randomize1],'second'=>'2.'.$myarry[$randomize2],'third'=>'3.'.$myarry[$randomize3]);
//encode array with PHP json_encode and print output
echo json_encode($myvals);
?>JSON Data
JSON data below is similar to what our process.php file will generate.JQUERY
- 1
- 2
- 3
- 4
- 5
{
"first":"1.uspendisse potenti.",
"second":"2.Morbi ligula orci",
"third":"3.Proin rutrum euismod lorem"
}Full Code (Using both Methods)
Our complete HTML code, as you can see both methods are wrapped in functions, and are called in button click events.JQUERY
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$("#method1").click(function() {
MethodOne();
});
$("#method2").click(function() {
MethodTwo();
});
});
//Method 1
function MethodTwo()
{
jQuery.ajax({
url: "process.php",
dataType:'json',
success:function(response)
{
$('#result').html(response.first );
$('#result2').html(response.second );
$('#result3').html(response.third);
}
});
}
//Method 2
function MethodOne()
{
$.getJSON("process.php", function(response) {
$('#result').html(response.first);
$('#result2').html(response.second);
$('#result3').html(response.third);
});
}
// ]]></script>
<input id="method1" type="button" value="Json Method 1" /><input id="method2" type="button" value="Json Method 2" />
<div id="result"></div>
<div id="result2"></div>
<div id="result3"></div>
