Licanpor/gist:de1dc2ac5a78a490b87da0f1ced52a6e

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Prueba API</title>
</head>
<body>
	<form id="form-user" align="center">
	<h2>Usuario</h2>
		<div class="input-div" id="input-name">
			<input type="name" name="nombre" id="nombre" placeholder="Nombre">
		</div>
		<br>
		<div class="input-div" id="input-mail">
			<input type="email" name="correo" id="email" placeholder="Correo Electrónico">
		</div>
		<br>
		<div class="input-div" id="input-pass">
			<input type="password" name="contrasena" id="password" placeholder="Contraseña">
		</div>
		<br>

		<button id="save-btn" type="submit">GUARDAR</button>
	</form>
	<br>
	<button id="reload">ReLoad</button>
	<br>
	<h2>Lista de Usuarios</h2>
	<div id="lista">

	</div>


</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
<script id="usuarios" type="x-tmpl-mustache">
	<div>
		<div>Nombre:{{name}}</div>
		<div>Correo:{{email}}</div>
		<button class="borrar" data-id="{{id}}">BORRAR</button>
	</div>
</script>
<script>

$(document).on("click", "#reload", function(){
    location.reload(true);
});
$.ajax({
	url : 'http://138.197.198.103:3000/api/RoccUsers',
	success: function (response){
		console.log(response);
		response.forEach(function(valor, index){
			var template = $('#usuarios').html();
			Mustache.parse(template);
			var rendered = Mustache.render(template, valor);
				$('#lista').append(rendered);
		});
	},
	error: function (error){
	}
});


	$('#form-user').submit(function(event){
		event.preventDefault();
		console.log('entro');
		var nombre = $("#nombre").val();
		var email = $("#email").val();
		var password = $("#password").val();
		var data = {
			name: nombre,
			email: email,
			password: password
		};

		$.ajax({
			url : 'http://138.197.198.103:3000/api/RoccUsers',
			success: function (response){
				console.log(response);
				response.forEach(function(valor, index){
					var template = $('#usuarios').html();
					Mustache.parse(template);
					var rendered = Mustache.render(template, valor);
	  				$('#lista').append(rendered);
				});
			},
			error: function (error){
			},
			method: 'POST',
			data: data
		});
	});

	$('body').on('click', '.borrar', function(event){
		var id = $(this).data('id');
		console.log(id);
		$.ajax({
			url : 'http://138.197.198.103:3000/api/RoccUsers' + '/' + id,
			success: function (response){
				console.log(response);
				response.forEach(function(valor, index){
					var template = $('#usuarios').html();
					Mustache.parse(template);
					var rendered = Mustache.render(template, valor);
						$('#lista').append(rendered);
				});
			},
			error: function (error){
			},
			method: 'DELETE'
		});
	});

</script>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Prueba API</title>
	</head>
	<body>
	<form id="form-user" align="center">
	<h2>Usuario</h2>
	<div class="input-div" id="input-name">
	<input type="name" name="nombre" id="nombre" placeholder="Nombre">
	</div>
	<br>
	<div class="input-div" id="input-mail">
	<input type="email" name="correo" id="email" placeholder="Correo Electrónico">
	</div>
	<br>
	<div class="input-div" id="input-pass">
	<input type="password" name="contrasena" id="password" placeholder="Contraseña">
	</div>
	<br>

	<button id="save-btn" type="submit">GUARDAR</button>
	</form>
	<br>
	<button id="reload">ReLoad</button>
	<br>
	<h2>Lista de Usuarios</h2>
	<div id="lista">

	</div>


	</body>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
	<script id="usuarios" type="x-tmpl-mustache">
	<div>
	<div>Nombre:{{name}}</div>
	<div>Correo:{{email}}</div>
	<button class="borrar" data-id="{{id}}">BORRAR</button>
	</div>
	</script>
	<script>

	$(document).on("click", "#reload", function(){
	location.reload(true);
	});
	$.ajax({
	url : 'http://138.197.198.103:3000/api/RoccUsers',
	success: function (response){
	console.log(response);
	response.forEach(function(valor, index){
	var template = $('#usuarios').html();
	Mustache.parse(template);
	var rendered = Mustache.render(template, valor);
	$('#lista').append(rendered);
	});
	},
	error: function (error){
	}
	});



	$('#form-user').submit(function(event){
	event.preventDefault();
	console.log('entro');
	var nombre = $("#nombre").val();
	var email = $("#email").val();
	var password = $("#password").val();
	var data = {
	name: nombre,
	email: email,
	password: password
	};

	$.ajax({
	url : 'http://138.197.198.103:3000/api/RoccUsers',
	success: function (response){
	console.log(response);
	response.forEach(function(valor, index){
	var template = $('#usuarios').html();
	Mustache.parse(template);
	var rendered = Mustache.render(template, valor);
	$('#lista').append(rendered);
	});
	},
	error: function (error){
	},
	method: 'POST',
	data: data
	});
	});

	$('body').on('click', '.borrar', function(event){
	var id = $(this).data('id');
	console.log(id);
	$.ajax({
	url : 'http://138.197.198.103:3000/api/RoccUsers' + '/' + id,
	success: function (response){
	console.log(response);
	response.forEach(function(valor, index){
	var template = $('#usuarios').html();
	Mustache.parse(template);
	var rendered = Mustache.render(template, valor);
	$('#lista').append(rendered);
	});
	},
	error: function (error){
	},
	method: 'DELETE'
	});
	});

	</script>

	</html>