LAHacks/js-ajax-php-json-usage.html at master · sbaum1994/LAHacks · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<head>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
	<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: "response.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>
</head>
<body>
<form action="response.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
  <input type="text" name="url" value="" placeholder="URL" />
  <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>