SoldierCorp/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ejemplo PHP con jQuery Ajax</title>

	<!-- Bootstrap-->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

	<!-- jQuery-->
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="main.js"></script>
	<style>
		body {
			margin: 80px auto;
			width: 500px;
		}
		h1 {
			text-align: center;
		}
		.fa {
			display: none;
		}
	</style>
</head>
<body>
	<h1>jQuery<br/>Envio de datos por Ajax</h1>
	<form>
		<p>
		    <label for="username">Username</label>
		    <input class="form-control" id="username" name="username" type="text"/>
		</p>
		<p>
		    <label for="password">Password</label>
		    <input class="form-control" id="password" name="password" type="password"/>
		</p>
		<input class="btn btn-primary" type="submit" value="Login">
		<i class="fa fa-refresh fa-spin"></i>
	</form>
	<span></span>
</body>
</html>

## main.js
$(document).ready(function() {

	$('form').submit(function(e) {
		e.preventDefault();

		var data = $(this).serializeArray();
		data.push({name: 'tag', value: 'login'});

		$.ajax({
			url: 'process.php',
			type: 'post',
			dataType: 'json',
			data: data,
			beforeSend: function() {
				$('.fa').css('display','inline');
			}
		})
		.done(function() {  //true
			$('span').html("Correcto");
		})
		.fail(function() {  //false
			$('span').html("Falso");
		})
		.always(function() {
			setTimeout(function() {
				$('.fa').hide();
			}, 1000);
		});

	})
})

## process.php
<?php

	$tag = $_POST['tag'];

	if (isset($tag) && $tag !== '') {

		if ($tag == 'login') {
			if ($_POST['username'] === 'soldier')
				echo true;
			echo false;
		}
	}

?>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Ejemplo PHP con jQuery Ajax</title>

	<!-- Bootstrap-->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

	<!-- jQuery-->
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="main.js"></script>
	<style>
	body {
	margin: 80px auto;
	width: 500px;
	}
	h1 {
	text-align: center;
	}
	.fa {
	display: none;
	}
	</style>
	</head>
	<body>
	<h1>jQuery<br/>Envio de datos por Ajax</h1>
	<form>
	<p>
	<label for="username">Username</label>
	<input class="form-control" id="username" name="username" type="text"/>
	</p>
	<p>
	<label for="password">Password</label>
	<input class="form-control" id="password" name="password" type="password"/>
	</p>
	<input class="btn btn-primary" type="submit" value="Login">
	<i class="fa fa-refresh fa-spin"></i>
	</form>
	<span></span>
	</body>
	</html>
	$(document).ready(function() {

	$('form').submit(function(e) {
	e.preventDefault();

	var data = $(this).serializeArray();
	data.push({name: 'tag', value: 'login'});

	$.ajax({
	url: 'process.php',
	type: 'post',
	dataType: 'json',
	data: data,
	beforeSend: function() {
	$('.fa').css('display','inline');
	}
	})
	.done(function() { //true
	$('span').html("Correcto");
	})
	.fail(function() { //false
	$('span').html("Falso");
	})
	.always(function() {
	setTimeout(function() {
	$('.fa').hide();
	}, 1000);
	});

	})
	})
	<?php

	$tag = $_POST['tag'];

	if (isset($tag) && $tag !== '') {

	if ($tag == 'login') {
	if ($_POST['username'] === 'soldier')
	echo true;
	echo false;
	}
	}

	?>