Skip to content
Related Articles

Related Articles

How to send a JSON object to a server using Javascript?
  • Difficulty Level : Medium
  • Last Updated : 26 Sep, 2019

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.




    <!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>
  • 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.






    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);
            }

    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.




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

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :