Updated April 10, 2023
Definition of jQuery Ajax formData
- It can set up the key and values of the given form and sends values using the jQuery Ajax method.
- It is a method to provide form values like text, numbers, images, and files and upload them on the URL server.
- It is a function to create a new object and send multiple files using this object.
- It is a method to setup “multipart/ form-data” and upload on server using XMLHttpRequest.
- It is a constructor to interconnect form data with the server using Ajax HTTP request.
- It is a function to create form information and work on it.
- It is a operate form of data like insert, delete, and retrieve, and so on.
- It is also supported to interact between server and user using form data.
Syntax:
var variable_name = new formData();Description of Syntax:
It creates a new object using a variable.
The “formData” is a constructor to create an object.
The object helps to work form Data methods such as append, delete, get, etc.
methods syntax is below.
var variable_name = new formData();
variable_name.Method(name);append method syntax is below.
variable_name.append(name, value);
OR
variable_name.append(name, value, filename);delete method syntax is below.
variable_name.delete(name);get method syntax is below.
variable_name.get(name);set method syntax is below.
variable_name.set (name, value);
OR
variable_name.set (name, value, filename);The jQuery Ajax formData has the getAll method syntax below.
variable_name.getAll(name);entries method syntax is below.
var variable_name = new formData();
variable_name.append(key_1, value_2);
variable_name.append(key_2, value_2);
for(var temp_var of variable_name.entries()) {
document.write( temp_var[0]+ ' ,' +temp_var[1]);
}keys method syntax is below.
var variable_name = new formData();
variable_name.append(key_1, value_2);
variable_name.append(key_2, value_2);
for(var temp_var of variable_name.keys()) {
document.write( temp_var[0]+ ' ,' +temp_var[1]);
}values method syntax is below.
var variable_name = new formData();
variable_name.append(key_1, value_2);
variable_name.append(key_2, value_2);
for(var temp_var of variable_name.values()) {
document.write( temp_var[0]+ ' ,' +temp_var[1]);
}The jQuery Ajax formData has method syntax below.
variable_name.has(name);How does Ajax formData work in jQuery?
The HTML page is created through filename with .html extension.
Example: jQueryform.html
jQuery files are placed inside of the jQueryform.html file in the body section. To jQuery, Ajax formData requires to either downloading the jQuery library or using the jQuery CDN version link. Download the latest development version or product version of jQuery from jQuery.com. The user can use offline jQuery in the web application through the jQuery library.
The jQuery version is place inside of the HTML page. The jQuery link is below.
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>The user can use online jQuery in the web application through the jQuery CDN version link. The <script> tag is placed inside of the body section on the HTML page.
<script> write a jQuery Ajax load code here… </script>
<script>
$(document).ready (function (){
$('#add').click (function (){
document.write ('file uploaded successfully!')
var frmdta = new FormData();
frmdta.append ( 'uploadfile', $('#uploadfile')[0].files[0]);
$.ajax({
url: 'www.educba.com',
data: frmdta,
type: 'POST',
});
});
});
</script>Write an HTML code in the body section of the web page.
<div id = "formData">
<form>
<input type = "file" name = "uploadfile" id = "uploadfile" />
<br />
<input type = "button" id = "add" value = "Add file" />
</form>
</div>Combine the working procedure of methods.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"></script>
</head>
<body>
<div id = "formData" >
<form>
<input type="file" name="uploadfile" id="uploadfile" />
<br /> <br/>
<input type="button" id="add" value="Add file" />
</form>
</div>
<script>
$(document).ready(function(){
$('#add').click(function(){
document.write('file uploaded successfully!')
var frmdta = new FormData();
frmdta.append( 'uploadfile', $('#uploadfile')[0].files[0]);
$.ajax({
url: 'www.educba.com',
data: frmdta,
type: 'POST',
});
});
});
</script>
</body>
</html>Examples
Let us discuss a few examples.
Example #1
Illustration onf append method example is given below.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"></script>
</head>
<body>
<div id = "formData" >
<form>
<input type="file" name="uploadfile" id="uploadfile" />
<br /> <br/>
<input type="button" id="add" value="Add file" />
</form>
</div>
<script>
$(document).ready(function(){
$('#add').click(function(){
document.write('file uploaded successfully!')
var frmdta = new FormData();
frmdta.append( 'uploadfile', $('#uploadfile')[0].files[0]);
$.ajax({
url: 'www.educba.com',
data: frmdta,
type: 'POST',
});
});
});
</script>
</body>
</html>Output:
Before click the button Output
After clicking the button Output
Example #2
Entries method example is below
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"></script>
</head>
<body>
<div id = "formData" >
<form>
<input type="file" name="uploadfile" id="uploadfile" />
<br /> <br/>
<input type="button" id="add" value="Add file" />
</form>
</div>
<script>
$(document).ready(function(){
$('#add').click(function(){
document.write('file uploaded successfully! </br>');
var frmdta = new FormData();
frmdta.append( '1', ' good </br>');
frmdta.append( '2', ' learn </br>');
frmdta.append( '3', ' tutorial </br>');
for(var temp_var of frmdta.entries()) {
document.write( temp_var[0]+ ' ,' +temp_var[1]);
}
$.ajax({
url: 'www.educba.com',
data: frmdta,
type: 'POST',
});
});
});
</script>
</body>
</html>Output:
Before clicking the button Output
After clicking the button Output
Example #3
Values method example is below
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"></script>
</head>
<body>
<div id = "formData" >
<form>
<input type="file" name="uploadfile" id="uploadfile" />
<br /> <br/>
<input type="button" id="add" value="Add file" />
</form>
</div>
<script>
$(document).ready(function(){
$('#add').click(function(){
document.write('file uploaded successfully! </br>');
var frmdta = new FormData();
frmdta.append( '1', ' good </br>');
frmdta.append( '2', ' learn </br>');
frmdta.append( '3', ' tutorial </br>');
for(var temp_var of frmdta.values()) {
document.write( temp_var[0]+ ' ,' +temp_var[1]);
}
$.ajax({
url: 'www.educba.com',
data: frmdta,
type: 'POST',
});
});
});
</script>
</body>
</html>Output:
Before clicking the button Output
After clicking the button Output
Conclusion
- The jQuery Ajax formData is used for communication between a user and a web application.
- It helps to make the application lightweight, user-friendly, and interactive.
- It also helps to operate more than one file easily.
Recommended Articles
This is a guide to jQuery Ajax formData. Here we discuss definition, syntax, and How does Ajax formData work in jQuery? with examples. You may also have a look at the following articles to learn more –
