jQuery HTTP GET
HTTP GET requests are appropriate for retrieving data without changing server state. jQuery provides $.get(), $.getJSON() and the more configurable $.ajax().
Simple GET Request Top ↑
$.get(
"get-clockck.php"
)
.done(function ( data ) {
$( "#d1" ).text( data );
})
.fail(function () {
$( "#d1" ).text(
"Request failed."
);
});
Pass GET Parameters Top ↑
$.get(
"backend.php",
{
name: $( "#name" ).val(),
city: $( "#city" ).val()
}
).done(function ( data ) {
$( "#result" ).text( data );
});
Send Form Data with GET Top ↑
const query =
$( "#f1" ).serialize();
$.get(
"backend.php?" + query
).done(function ( data ) {
$( "#result" ).text( data );
});
For structured request parameters, passing a data object is clearer than manually building query strings. See serialize().
GET and JSON Top ↑
$.get(
"backend.php",
{ id: 12 },
function ( data ) {
console.log( data.name );
},
"json"
);
When Not to Use GET Top ↑
Do not use GET for operations that create, update or delete records. Those actions should use POST/PUT/PATCH/DELETE according to the backend design. Continue to jQuery POST.
Download the original HTTP GET examples
Original Source Examples Retained for Migration Reference Top ↑
These source-page examples are retained so no learner-purpose example is silently lost. Use the modern examples above as the recommended implementation.
Original example 1
$.get(url,data,function)Original example 2
<html>
<head>
<title>plus2net demo scripts using JQuery</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/
jquery/1.8.1/jquery.min.js">
</script>
<body>
<script>
$(document).ready(function() {
$("#b1").click(function(event){
$.get('get-clockck.php',function(return_data){
$("#display").html(return_data);
});
});
});
</script>
<input type="button" id="b1" value="Show Date & Time">
<br>
<div id="display" ></div>
</body>
</html>Original example 3
<?Php
echo date("d/m/y : H:i:s", time());
?>Original example 4
<script>
$(document).ready(function() {
$("#b2").click(function(event){
$.get('get-clockck2.php',{'site':'plus2net'},
function(return_data2){$("#display2").html(return_data2);
});
});
});
</script>
<input type="button" id="b2" value="Show Date & Time with data">
<br>
<div id="display2" ></div>Original example 5
<?Php
$site=$_GET['site'];
echo "Welcome $site ";
echo date("d/m/y : H:i:s", time());
?>Original example 6
data_list4 = $("#f1").serialize();Original example 7
data_list4 = $("#f1").serialize();
$("#display4").html(data_list4);Original example 8
<html>
<head>
<title>plus2net demo scripts using JQuery</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/
jquery/1.8.1/jquery.min.js"></script>
<body>
<script>
$(document).ready(function() {
$("#b1").click(function(event){
data_list4 = $("#f1").serialize();
$("#display4").html(data_list4);
$.get( "form-getck.php", $( "#f1" ).serialize(),function(return_data){
$("#display3").html(return_data);
});
});
});
</script>
<table><form id=f1>
<tr><td>Name</td><td><input type=text name=t1></td></tr>
<tr><td>Add1</td><td><input type=text name=t2></td></tr>
<tr><td>Sex</td><td>
<input type=radio name=r1 value=male>Male
<input type=radio name=r1 value=female>Female
</td></tr>
<tr><td>Class</td><td><select name=class>
<option value=first>First</option>
<option value=second>Second</option>
<option value=third>Third</option>
</select>
</td></tr>
<tr><td><input type=checkbox value=yes name=c1></td>
<td>Agree to terms & conditions</td></tr>
<tr><td><input type="button" id="b1" value="Submit"></td><td></td></tr>
</form>
</table>
<div id="display3" ></div>
<br>
<div id="display4" ></div>
</body>
</html>Original example 9
<?Php
$t1=$_GET['t1'];
$t2=$_GET['t2'];
$r1=$_GET['r1'];
$r1=$_GET['r1'];
$class=$_GET['class'];
$c1=$_GET['c1'];
$str =" Name : $t1, Add : $t2, Sex : $r1, class : $class, c1 : $c1 ";
echo $str;
?>Original example 10
$('#b1').click(function(){
var id=$(this).attr('id');
$.get('delete-record.php',{'p_id':id,'todo':'delete'},function(return_data){
$("#msg_display").html(return_data.msg);
$("#msg_display").show();
setTimeout(function() { $("#msg_display").fadeOut('slow'); }, 4000);
},"json");Original example 11
<?Php
$p_id=$_GET['p_id'];
$todo=$_GET['todo'];
$elements=array("p_id"=>"$p_id","db_status"=>"","msg"=>"");
$elements['msg']="Records Deleted";
$elements['db_status']="True";
echo json_encode($elements);
?>Original example 12
#msg_display{
display: none;
position: fixed;
z-index: 10;
top:0;
right:50%;
}Original example 13
var chk_id=$(this).attr('id');
var chk_value=$(this).val();
var chk_status= $(this).prop('checked');Original example 14
$.each(return_data.data, function(key,value){Original example 15
$('#msg_display').html(" id : " + value.chk_id + " | Checkbox Status : " + value.chk_status + " | db_status : " + value.db_status + " | Script Status : " + value.script_status );Original example 16
<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function(){
var chk_id=$(this).attr('id');
var chk_value=$(this).val();
var chk_status= $(this).prop('checked');
$.get('form-get1ck.php',{'chk_id':chk_id,'chk_status':chk_status},function(return_data){
$.each(return_data.data, function(key,value){
$('#msg_display').html(" id : " + value.chk_id + " | Checkbox Status : " + value.chk_status + " | db_status : " + value.db_status + " | Script Status : " + value.script_status );
$('#msg_display').show();
setTimeout(function() { $("#msg_display").fadeOut('slow'); }, 4000);
});
}, "json");
});
});
</script>Original example 17
<?Php
$chk_id=$_GET['chk_id'];
$chk_status=$_GET['chk_status'];
/// Set your script status ///
$script_status='OK';
$db_status='OK';
/// JSON string as output ///
echo "{"data":[{"chk_id":"$chk_id","db_status":"$db_status","script_status":"$script_status","chk_status":"$chk_status"}]}";
?>Additional Original Learning Routes Top ↑
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Connect:
This article is written by plus2net.com team.
