Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery Training

Jquery training blog

Ajax post with jquery and php

AJAX stands for Asynchronous JavaScript and XML. AJAX used to create faster, and more interactive web applications using javascript, XML. Alternativly we can say that, using ajax, we can exchange data or update of a small portion of web page without reloading the page. In the below example, we are going to descriibe, how to Continue Reading


AJAX stands for Asynchronous JavaScript and XML. AJAX used to create faster, and more interactive web applications using javascript, XML. Alternativly we can say that, using ajax, we can exchange data or update of a small portion of web page without reloading the page.
In the below example, we are going to descriibe, how to make Ajax work with PHP.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<style>

.success{
border: 1px solid #06ab31;
padding: 5px;
margin-bottom: 1em;
background: #d1e2c4;
text-align: center;
}
.error{
border: 1px solid #ba5e00;
padding: 5px;
margin-bottom: 1em;
background: #ffc0ae;
text-align: center;
}
#form-block{
margin-left: 40%;
margin-top: 10%;
border: 1px solid;
width: 25%;
text-align: center;
padding:1%;
}
.element-block{
margin-bottom:10px;
}
</style>
</head>
<body>

<div id="form-block">
<div id="msg"></div>
<form method="post" name="postForm">
<div class="element-block">
<label>User name</label>
<input type="text" name="username" id="username" placeholder="Type user name">
</div>
<input type="button" value="Submit" id="submit" />
</form>
</div>
<script>
$(document).ready(function() {
$('#submit').click(function(event) {
$('#username').empty();
$('#msg').text('');
var postForm = {
'username' : $('input[name=username]').val()
};
$.ajax({
type : 'POST',
url : 'execute.php',
data : postForm,
dataType : 'json',
success : function(data) {

if(data.success==true){
$('#msg').removeClass('error');
$('#msg').addClass('success');
$('#msg').text(data.msg);

}else{
$('#msg').removeClass('success');
$('#msg').addClass('error');
$('#msg').text(data.msg);
}

},error: function(data) {
alert(data);
}

});
});
});
</script>
</body>
</html>


The execute.php file

<?php

$errors = array();
$data = array();

if (empty($_POST['username'])) {
$errors = 'User name cannot be blank';
}

if (!empty($errors)) {
$data['success'] = false;
$data['msg'] = $errors;
}

else {
$data['success'] = true;
$data['msg'] = 'Record inserted Successfully';
}

echo json_encode($data);
?>






About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts