Teach with us

How to send FormData objects with Ajax-requests in jQuery?

In this tutorial, we will learn How to send FormData objects with Ajax requests in jQuery.

The FormData object stores value in the form of key-value pair. It mainly sends form data to the server with HTTP requests. If the form’s encoding type had been set to multipart/form-data, the submitted data would have been sent similarly via the submit() function. The FormData object contains multiple operations methods such as append, delete, set, etc.

Syntax

const formData = new FormData()
formData.append('key', 'value')

Users can follow the above syntax to create a FormData object.

Asynchronous JavaScript And XML are referred to as AJAX. It does asynchronous activities on your web page. AJAX uses HTTP requests to communicate with the server and receives the information requested as an HTTP response. The jQuery library has methods to perform ajax operations efficiently. We can send the FormData object in the data parameter of the ajax.

Syntax

//FormData Object
const formData = new FormData()
formData.append('key', 'value')
// AJAX
$.ajax({
   url: '...URL ENDPOINT',
   data: formData,
   type: 'POST', // GET/POST
   processData: false,
   success: function (data) {
      // Code blocks if formData send successfully
   },
   error: function (err) {
      // Code blocks if formData send failed
   },
})

In the above syntax, we showed how we could send the FormData object with Ajax requests in jQuery.

Example

In the below example, we have used the Ajax requests in jQuery to send the FormData object to the backend server. We have taken multiple input fields to take user input for name, email, and password, and these input field values will be bundled together in the FormData object and will send to the backend server. The ajax method of jQuery helps to send the HTTP request. In the data parameter of ajax, we set the FormData object. The method is set to POST to send a post request. A button click event handler is associated with the ‘Send’ button that performs the ajax request to the server.

<html>
  <head>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <h2> Sending <i> FormData objects with Ajax requests </i> in jQuery </h2>
    <label for = "name">Name: </label> <input id = "name" type = "text" name = "name" /><br>
    <label for = "email">Email: </label> <input id = "email" type = "text" name = "email" /><br><br>
    <button id = "btn" onclick = "btnClick()">Send</button>
    <div id = "root" >Click on the send button to submit the FormData object</div>
   
    <script>
      const root = document.getElementById('root')
      const name = document.getElementById('name')
      const email = document.getElementById('email')
      function btnClick() {
        //FormData Object
        const formData = new FormData()
        formData.append('name', name.value)
        formData.append('email', email.value)
        // AJAX
        $.ajax({
          url: 'https://jsonplaceholder.typicode.com/posts',
          data: formData,
          type: 'POST',
          processData: false,
          contentType: false,
          success: function (data) {
            root.innerHTML = 'FormData Object Send Successfully!'
          },
          error: function (err) {
            root.innerHTML = 'FormData Object Send Failed!'
          },
        })
      }
    </script>
  </body>
</html>

This tutorial taught us how to send FormData objects with Ajax requests in jQuery. In addition, we learned about the FormData object, the Ajax requests, and their syntax. In the example, we learned how to send input field data as a FormData object to the server using Ajax requests. Users can follow the example to understand the FormData object sent with Ajax requests in jQuery.

Updated on 08-Dec-2022 11:31:57

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements