AJAX is a web technology and stands for 'Asynchronous Javascript And XML'. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page( without full page reloads).
Suppose we have a form with some input fields and a php action file to process the data. Normally once we submit the form using the submit button, the php action file is loaded in the browser and then the remaining processes are done. With ajax, we can avoid the loading of the php action file in the browser once the form is submitted. What is going behind the scene is that ajax script will take the values of our form fields and pass it to the php action file and the whole thing is done in the background. JQuery, the popularly used javascript framework, has a built-in ajax function too which makes ajax calls even more easier.
Suppose we have a form:
form.html
Suppose we have a form with some input fields and a php action file to process the data. Normally once we submit the form using the submit button, the php action file is loaded in the browser and then the remaining processes are done. With ajax, we can avoid the loading of the php action file in the browser once the form is submitted. What is going behind the scene is that ajax script will take the values of our form fields and pass it to the php action file and the whole thing is done in the background. JQuery, the popularly used javascript framework, has a built-in ajax function too which makes ajax calls even more easier.
Suppose we have a form:
<form id="myForm"> Username:<input id="username" type="text" /> Photo:<input id="photo" type="file" /> <input id="enter" type="button" value="Enter" /> </form>Use JQuery's FormData object to collect the values of our form fields using FormData's append() function. Then use JQuery.ajax() function to post the data to the action.php file.
<script>
function post_data_using_ajax() {
var formData = new FormData();
formData.append('username', $('#username').val());
formData.append('photo', $('#photo')[0].files[0]);
jQuery.ajax({
type: "POST",
url: "action.php", // Our action file
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
data: formData,
success: function(res) {
alert("Inserted successfully");
}
});
}
</script>
Bind the function to 'Enter' button of the form inside a script element and place it inside body.
<script>
$("#enter").click(post_data_using_ajax);
</script>
Now you can process the form variables in the normal way in action.php
<?php // Do the database connection code if necessary $username = $_POST['username']; $filename = $_FILES['photo']['name']; $photo_path = "uploads/"; //Upload the photo to the server move_uploaded_file($_FILES['photo']['tmp_name'],$path . $filename); //Do whatever you want like insert the variables to a mysql table etc... ?>So here is the final html file.
form.html
<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<form id="myForm">
Username:<input id="username" type="text" />
Photo:<input id="photo" type="file" />
<input id="enter" type="button" value="Enter" />
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function post_data_using_ajax() {
var formData = new FormData();
formData.append('username', $('#username').val());
formData.append('photo', $('#photo')[0].files[0]);
jQuery.ajax({
type: "POST",
url: "action.php", // Our action file
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
data: formData,
success: function(res) {
alert("Inserted successfully");
}
});
}
</script>
<script>
$("#enter").click(post_data_using_ajax);
</script>
</body>
</html>
No comments:
Post a Comment