Ajax example

by Matthew G

HTML

<head>
    <!-- JQUERY -->
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    
    <!-- BOOTSTRAP -->
  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	
	  <!-- JQUERY UI -->
	  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
	  
	  <!-- JQUERY DATATABLES -->
	  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
	  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
	
	  <!-- MOMENTS -->
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js"></script>
		
	  <!-- DATATABLES MOMENTS -->
	  <script src="https://cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>
	
	  <!-- FONTAWESOME -->
	  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	
	  <!-- DATATABLES - FONTAWESOME -->
	  <link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/1.10.12/integration/font-awesome/dataTables.fontAwesome.css">

</head>
<BODY>
<h1>Mocking AJAX on jsfiddle</h1>

<div id="ajax"></div>
</BODY>

CSS

h1 { font-weight: bold; display: block; margin-bottom: 0.5em; }

JavaScript

$.ajax({
  type: 'POST',
  dataType: 'json',
  url: '/echo/json/',
  //data : { json: JSON.stringify( jsonData ) },
  data : { json: JSON.stringify( getData() ) },
  success: function(data) {

  	if( $.isArray(data) )
    {    		
    	for(var i=0; i<data.length; i++)
      {
      		$('#ajax').append("Array is:")
          		.append(data[i].Actions)
    					.append( ['<br/>', data[i].RequestedDate] )
              .append( ['<br/>', data[i].CardNumber] )
              .append( ['<br/>', data[i].CardHolder] )
              .append( ['<br/>', data[i].ShipAddr1] )
              .append( ['<br/>', data[i].ShipAddr2] )
              .append( ['<br/>', data[i].City] )
              .append( ['<br/>', data[i].State] )
              .append( ['<br/>', data[i].Zip] )
              .append( ['<br/>', data[i].ShipMethod] )
              .append( ['<br/>', data[i].CreatedBy] )
              .append( ['<br/>', data[i].Status] );
      }    	
  	}
    else
    {
    		$('#ajax').append("Record is:")
        			.append(data.Actions)
    					.append( ['<br/>', data.RequestedDate] )
              .append( ['<br/>', data.CardNumber] )
              .append( ['<br/>', data.CardHolder] )
              .append( ['<br/>', data.ShipAddr1] )
              .append( ['<br/>', data.ShipAddr2] )
              .append( ['<br/>', data.City] )
              .append( ['<br/>', data.State] )
              .append( ['<br/>', data.Zip] )
              .append( ['<br/>', data.ShipMethod] )
              .append( ['<br/>', data.CreatedBy] )
              .append( ['<br/>', data.Status] );
    }
  }  
});

function getData()
{
	return [{
    "Actions": 				"",
    "RequestedDate": 	"10/20/2016",
    "CardNumber":			"123456789159483",
    "CardHolder":			"Jim Doe",
    "ShipAddr1":			"4532 Blue St",
    "ShipAddr2":			"",
    "City":						"Big City",
    "State":					"New York",
    "Zip":						"10101",
    "ShipMethod":			"Regular Mail",
    "CreatedBy":			"Jane Doe",
    "Status":					"COMPLETED" ...