we have created 5 files for insert record through Ajax into database.
(i) Index.php
(ii) response-file.php
(iii) connection.php
(iv) student.sql
(v) jquery-1.11.2.min.js
Now you enter the student name and select the class, after that click the save button for saving data into database.
Note:- you can download code from this
(i) index.php:- file which has html form, ajax function and include jquery library file.
Note:- For insert, update and delete record, we should use POST method not GET method.
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>
function Ajaxfun() {
var stuname = $('#stuname').val();
var stuclass = $('#stuclass').val();
$.ajax({
// The URL for the request
url : "response-file.php",
// The data to send (will be converted to a query string)
data : {
sname : stuname,
sclass : stuclass
},
// Whether this is a POST or GET request
type : "POST",
// Code to run if the request succeeds;
// the response is passed to the function
success : function(response) {
//alert(response);
$("#ajaxDiv").html(response);
},
// Code to run if the request fails; the raw request and
// status codes are passed to the function
error : function(xhr, status, errorThrown) {
alert("Sorry, there was a problem!");
console.log("Error: " + errorThrown);
console.log("Status: " + status);
console.dir(xhr);
},
});
}
</script>
</head>
<body>
<form name="add_stu_record" id="add_stu_record">
<div style="width:400px; background-color:#e9eaed">
<div align="center"><h3>Insert Record through Ajax</h3></div>
<div>
<div style="float: left;width:30%">
Student Name
</div>
<div style="float: left;width:70%">
<input type="text" name="stuname" id="stuname" />
</div>
</div>
<div style="height: 5px; clear: both"></div>
<div>
<div style="float: left;width:30%">
Student Class
</div>
<div style="float: left;width:70%">
<select name="stuclass" id="stuclass">
<option value="">Select Class</option>
<option value="bca">BCA</option>
<option value="mca">MCA</option>
<option value="btech">Btech</option>
<option value="bba">BBA</option>
<option value="mba">MBA</option>
</select>
</div>
</div>
<div style="clear: both; height:5px;"></div>
<div align="center" onclick="Ajaxfun()">
<input type="button" name="getValue" value="Save" />
</div>
<div style="clear: both;"></div>
<div id="ajaxDiv"></div>
<div style="clear: both; height:5px;"></div>
</form>
</div>
</body>
</html>
(ii) response-file.php:- which has include database connection file and database query.
<?php
include ('connection.php');
$sname = mysql_real_escape_string($_REQUEST['sname']);
$sclass = mysql_real_escape_string($_REQUEST['sclass']);
$errmsg = "";
$err_count = 0;
if ($sname == '') {
$errmsg .= "<div style='color:#ff0000';>Please enter student name!</div>";
$err_count++;
}
if ($sclass == '') {
$errmsg .= "<div style='color:#ff0000';>Please select the student class!</div>";
$err_count++;
}
if ($err_count == 0) {
$query = "insert into stuinfo(stu_name,stu_class) values('".$sname."','".$sclass."')";
$result=mysql_query($query);
if(!$result)
{
echo 'Error: Record is not save' ;
}
else{
echo "<div style='color:#008000';>Insert record save successfully</div>";
}
} else {
echo $errmsg;
}
?>
(iii) connection.php:- which is include in the response-file.php
<?php
$host_name = "localhost";
$user_name = "root";
$password = "";
$database_name = "student";
$conn = mysql_connect($host_name, $user_name, $password);
if (!$conn) {
die('server is not connect');
} else {
mysql_select_db($database_name, $conn);
}
?>
(iv) student.sql:- upload in to mysql-database.
(v) jquery-1.11.2.min.js:- this jquery library include in the index.php file.
Note:- For update and delete record through ajax is very simple, you should change only query into response-file.php