jcadima
11/13/2015 - 8:08 PM

Simple Ajax with JSON

Simple Ajax with JSON

new_gist_file.html
content_copyfile_download
<!doctype html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>My jQuery Ajax test</title>
		<style type="text/css">
			#mybox {
				width: 300px;
				height: 250px;
				border: 1px solid #999;
			}
		</style>
		<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	</head>
	<body>

<form action="ajaxjson.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
  <input type="text" name="favorite_beverage" value="" placeholder="Favorite restaurant" />
  <input type="text" name="favorite_restaurant" value="" placeholder="Favorite beverage" />
  <select name="gender">
  <option value="male">Male</option>
  <option value="female">Female</option>
  </select>
  <input type="submit" name="submit" value="Submit form" />
</form>

<div class="the-return">
[HTML is replaced when successful.]
</div>


	</body>

<script type="text/javascript">
$("document").ready(function() {
  $(".js-ajax-php-json").submit(function(){
  var data = {
  "action": "test"
  };
  
  data = $(this).serialize() + "&" + $.param(data);
  $.ajax({
    type: "POST",
    dataType: "json",
    url: "ajaxjson.php", //Relative or absolute path to response.php file
    data: data,
    success: function(data) {
    $(".the-return").html(
    "Favorite beverage: " + data["favorite_beverage"] + "<br />Favorite restaurant: " + data["favorite_restaurant"] + "<br />Gender: " + data["gender"] + "<br />JSON: " + data["json"]
    );
    alert("Form submitted successfully.\nReturned json: " + data["json"]);
    }
  });
  return false;
  });
});
</script>
	
</html>
new_gist_file.php
content_copyfile_download
<?php

if (is_ajax()) {
	if (isset($_POST["action"]) && !empty($_POST["action"])) { //Checks if action value exists
	$action = $_POST["action"];
	switch($action) { //Switch case for value of action
	case "test": test_function(); break;
	}
	}
}

//Function to check if the request is an AJAX request
function is_ajax() {
	return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

function test_function(){
	$return = $_POST;
	//Do what you need to do with the info. The following are some examples.
	//if ($return["favorite_beverage"] == ""){
	// $return["favorite_beverage"] = "Coke";
	//}
	//$return["favorite_restaurant"] = "McDonald's";
	$return["json"] = json_encode($return);
	echo json_encode($return);
}