<!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>
<!-- our form -->
<input type="button" value="Post JSON" id="postJson" />
<!-- where the response will be shown -->
<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;