Ajax Tutorial
- What is Ajax
- How Ajax Work
- ajax() and load() Function
- AJAX get() and post() Methods
- AJAX Function
- Ajax Success
- Ajax Button Click
- Ajax div load on button click
- Insert Data
- Delete Data
- User Registration
- ContactUs Form
- Check existing Password in Ajax and change the Password
- Ajax Search
- Ajax Serialize Insert
- Ajax without Searialize Insert
- Ajax User Check Availability
- Ajax OptionBox
- Ajax Dropdown Session
- dynamic text box Add/Remove
- Star Rating
- Pin Check Available
- Ajax Programs
- Clear Form Field after submitting form
- Loader load show / hide
- Multiple Functions
Customer Say
Ajax Without Serialize Insert
Database
CREATE TABLE `freeze`.`user` (
`id` INT( 3 ) NOT NULL AUTO_INCREMENT ,
`username` VARCHAR( 30 ) NOT NULL ,
`password` VARCHAR( 50 ) NOT NULL ,
`email` VARCHAR( 50 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = INNODB;
When submit button is clicked, ajax function will be called with method as POST, url as ajax.php and sucess message.
File Name:- index.php
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name=$("#name").val();
var age=$("#age").val();
$.ajax({
type: "POST",
url: "data.php",
data:"name="+name+"&age="+age,
success: function(html)
{
$("#load").html(html);
}
});
return false;
});
});
</script>
</head>
<body>
<form method="post" action="" >
Username: <input type="text" name="name" id="name" /><br />
Age:<input type="text" name="age" id="age"/><br />
<input type="submit" name="submit" id="submit" /><br />
<div id="load"></div>
</form>
</body>
</html>
File Name:- data.php
<?phpif(isset($_POST['submit']))
{
$name=$_POST['name'];
$age=$_POST['age'];
echo $name;
echo $age;
}
?>