TryIt Editor v2.0 - jquery post json data with post method

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery post JSON data using .post() method by codeofaninja.com</title>
  </head>
  <body>
    <h1>jQuery post JSON data with .post() method</h1>
    <div>Click the button below to receive a response.</div>
    
    <input type="button" value="Post JSON" id="postJson" />
    
    <div id="response"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
    <script>
      $(document).ready(function() {
        $('#postJson').click(function() {
          // showing that something is loading
          $('#response').html("<b>Loading response...</b>");
          /*
           * 'post_receiver.php' - where you will be passing the form data
           * $(this).serialize() - for reading form data easily
           * function(data){... - data includes the response from post_receiver.php
           */
          $.post('post_receiver.php', {
            user_id: "143",
            username: "ninjazhai",
            website: "https://codeofaninja.com/"
          }, function(data) {
            // demonstrate the response
            $('#response').html(data);
          }).fail(function() {
            // if posting your form failed
            alert("Posting failed.");
          });
          // to restrain from refreshing the whole page page
          returns false;
        });
      });
    </script>
  </body>
</html>