jQuery HTTP POST
HTTP POST is used when data should be submitted in the request body, especially for operations that may create or change server-side state.
Post Data without Using the Response Top ↑
$.post(
"backend.php",
{
name: $( "#name" ).val()
}
);
Collect the Returned Data Top ↑
$.post(
"backend.php",
{
name: $( "#name" ).val()
}
)
.done(function ( data ) {
$( "#result" ).text( data );
})
.fail(function () {
$( "#result" ).text(
"Unable to save data."
);
});
Demo: POST and collect response →
Receive JSON Top ↑
$.post(
"backend.php",
{
id: 12,
mark: 85
},
function ( response ) {
$( "#result" ).text(
response.message
);
},
"json"
);
Demo: POST with JSON response →
PHP JSON Backend Top ↑
header(
'Content-Type: application/json; charset=utf-8'
);
$response = [
'status' => 'success',
'message' => 'Record updated'
];
echo json_encode(
$response,
JSON_UNESCAPED_UNICODE
);
See PHP JSON and JSON formatting.
Post Serialized Form Data Top ↑
$.post(
"backend.php",
$( "#f1" ).serialize()
).done(function ( response ) {
console.log( response );
});
For production state-changing forms, validate server-side, use prepared database queries, and add authentication/authorization and CSRF protection where appropriate.
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
<script>
$(document).ready(function() {
$("#b1").click(function(event){
$.post( "postck1.php", {"t1":$('#t1').val(),"t2":$('#t2').val()},function(return_data,status){
//$.post( "postck.php", $( "#f1" ).serialize(),function(return_data,status){
$("#msg").html(return_data);
});
});
});
</script>Original example 2
<?Php
$t1=$_POST['t1'];
$t2=$_POST['t2'];
$str =" Welcome $t1 $t2";
echo $str;
?>Original example 3
$("#msg").html(return_data);Original example 4
<?Php
$t1=$_POST['t1'];
$t2=$_POST['t2'];
$elements=array("t1"=>'T',"t2"=>'T',"msg"=>'',"validation_status"=>'OK');
$validation_status='OK';
$db_status='OK';
$msg='';
if(strlen($t1) <1 ){
$elements[t1]='F';
$validation_status= "NOTOK";
$msg.= " Enter your first name ";
}
if(strlen($t2) <1 ){
$elements[t2]='F';
$validation_status= "NOTOK";
$msg.= " Enter your last name ";
}
$elements["msg"]=$msg;
$elements["validation_status"]=$validation_status;
echo json_encode($elements);
?>Original example 5
<style>
.error{
background-color: yellow;
border-color: red;
}
</style>Original example 6
if(return_data.t1 =='F'){$("#t1").addClass('error');}
else{$("#t1").removeClass('error');}
if(return_data.t2 =='F'){$("#t2").addClass('error');}
else{$("#t2").removeClass('error');}
Decoding the JSON string and displaying messages.
In our POST method we have mentioned that incoming data type will be in JSON format. Hence we will receive data as JSON string so we need to decode the same. The return data will have several name value pairs and we will try to read them and based on the value respective action can be taken.
For example to know the validation status we will use return_data.validation_status. If it is equal to OK then we will display Welcome message otherwise we will display error message. Here is the example of it.
if(return_data.validation_status=="NOTOK"){
$("#msg").html(return_data.msg);
}else{
$("#msg").html("Welcome " + $('#t1').val() + $('#t2').val());
}Original example 7
<script>
$(document).ready(function() {
$("#b1").click(function(event){
$.post( "postck2.php", $( "#f1" ).serialize(),function(return_data,status){
if(return_data.validation_status=="NOTOK"){
$("#msg").html(return_data.msg);
}else{
$("#msg").html("Welcome " + $('#t1').val() + $('#t2').val());
}
if(return_data.t1 =='F'){$("#t1").addClass('error');}
else{$("#t1").removeClass('error');}
if(return_data.t2 =='F'){$("#t2").addClass('error');}
else{$("#t2").removeClass('error');}
},"json");
});
});
</script>
<table><form id=f1>
<tr><td>First Name</td><td><input type=text id="t1" name="t1"></td></tr>
<tr><td>Second Name</td><td><input type=text id="t2" name="t2"></td></tr>
<tr><td colspan=2><input type="button" id="b1" value="Submit"></td><td></td></tr>
</form>
</table>
<div id="msg" class="msg"></div>Original example 8
<style>
.error{
background-color: yellow;
border-color: red;
}
</style>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.
