How to send a JSON object to a server using Javascript?

JavaScript Object Notation (JSON). It is a lightweight data transferring format. It is very easy to understand by human as well as machine. It is commonly used to send data from or to server. Nowadays it is widely used in API integration because of its advantages and simplicity.

In this example we are going to use AJAX (Asynchronus JavaScript And XML), to send data in background. We are using PHP for the backend.

Frontend:



  • HTML:

    In the frontend we are going to build a form which takes name and email as a input and converts it into JSON object using javascript and send it to the server.
    After clicking the submit button a sendJSON() is called which is defined below.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      <head>
        <title>
          JavaScript | Sending JSON data to server.
        </title>
      </head>
      
      <body style="text-align:center;" id="body">
        <h1 style="color:green;">
          GeeksForGeeks
        </h1>
      
        <p>
            <!-- Making a text input -->
            <input type="text" id="name" placeholder="Your name">
            <input type="email" id="email" placeholder="Email">
              
            <!-- Button to send data -->
            <button onclick="sendJSON()">Send JSON</button>
      
          <!-- For printing result from server -->
          <p class="result" style="color:green"></p>
          
       </p>
      
      <!-- Include the JavaScript file -->
      <script src="index.js"></script>
      
      </body>
    </html>

    chevron_right

    
    

  • JavaScript:
    When sending data to a web server, the data has to be a string. So we are using JSON.stringify() function to convert data to string and send it via XHR request to the server. Below is the sample code.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function sendJSON(){
                   
                let result = document.querySelector('.result');
                let name = document.querySelector('#name');
                let email = document.querySelector('#email');
                   
                // Creating a XHR object
                let xhr = new XMLHttpRequest();
                let url = "submit.php";
            
                // open a connection
                xhr.open("POST", url, true);
      
                // Set the request header i.e. which type of content you are sending
                xhr.setRequestHeader("Content-Type", "application/json");
      
                // Create a state change callback
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
      
                        // Print received data from server
                        result.innerHTML = this.responseText;
      
                    }
                };
      
                // Converting JSON data to string
                var data = JSON.stringify({ "name": name.value, "email": email.value });
      
                // Sending data with the request
                xhr.send(data);
            }

    chevron_right

    
    

  • After running the code above you’ll see something like this –

  • Backend:

    We are using PHP as a scripting language. Create a file named submit.php, in this file, we’ll decode the received data to JSON and return a sentence formed using the received data.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?php
      
    header("Content-Type: application/json");
      
    $data = json_decode(file_get_contents("php://input"));
      
    echo "Hello $data->name, your email is $data->email";
      
    ?>

    chevron_right

    
    

Now when you fill the details and press the Send JSON button you’ll see something like:



My Personal Notes arrow_drop_up

Passionate Programmer💻 Fond of Cricket🏏 Bathroom BeatBoxer🎤😄

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.