Welcome to my blog!

Post JSON data using jQuery

July 17, 2018 13:33

Post JSON Data Using jQuery (edit)

Learning jQuery


An Introduction to jQuery


15 Powerful jQuery Tips and Tricks for Developers


Google Hosted Libraries - jQuery


jQuery HTML Table with .closest() method


20 Impressive jQuery Plugins to Replace the HTML Select Box


Posting JSON Data To The Server Using jQuery

<!DOCTYPE html>
	<title>Posting JSON Data To The Server Using jQuery</title>
<!-- <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <h1> Posting JSON Data To The Server Using jQuery </h1> <div id="response"> <!-- To be populated dynamically. --> </div> <script type="text/javascript"> // Define the data packet that we are going to post to the // server. This will be "stringified" as a JSON value. var postData = { name: "Joanna", hair: "Brunette", age: 35, favoriteMovies: [ "Terminator 2", "The Notebook", "Teenwolf" ] }; // Post the data to the server as the HTTP Request Body. // To do this, we have to stringify the postData value // and pass it in a string value (so that jQuery won't try // to process it as a query string). var ajaxResponse = $.ajax({ type: "post", url: "./api.cfm", contentType: "application/json", data: JSON.stringify( postData ) }) // When the response comes back, output the HTML. ajaxResponse.then( function( apiResponse ){ // Dump HTML to page for debugging. $( "#response" ).html( apiResponse ); } ); </script> </body> </html>


Recent posts