Permalink
Find file
d8e6e9d Oct 20, 2015
159 lines (126 sloc) 4.15 KB
<html>
<!--
Lectures 11 and 12 - CSC 210 Fall 2015
Philip Guo
This is the frontend for the Fakebook web app, which demonstrates CRUD
with Ajax using a REST API. (../server.js is the backend)
Start ../server.js and then visit this URL to view this webpage:
http://localhost:3000/fakebook.html
-->
<head>
<title>Fakebook</title>
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// define a generic Ajax error handler:
// http://api.jquery.com/ajaxerror/
$(document).ajaxError(function() {
alert("Sorry, there was a problem!");
});
$("#createButton").click(function() {
$.ajax({
// The URL for the request -- note the simple REST API!
// all URLs are relative to http://localhost:3000/
url: "users/",
type: "POST",
dataType : "text", // this URL returns a plain text string, not JSON
data : { name: $("#nameBox").val(),
job: $("#jobBox").val(),
pet: $("#petBox").val()
},
success: function( data ) {
console.log("You received some data!", data);
if (data == 'OK') {
$("#status").html("Successfully created a new user!");
} else {
$("#status").html("Error: could not create a new user!");
}
},
});
});
$("#readButton").click(function() {
// From: http://learn.jquery.com/ajax/jquery-ajax-methods/
// Using the core $.ajax() method
$.ajax({
// The URL for the request -- note the simple REST API!
// all URLs are relative to http://localhost:3000/
url: "users/" + $("#nameBox").val(),
type: "GET",
dataType : "json", // this URL returns data in JSON format
success: function( data ) {
console.log("You received some data!", data);
if (data.name) {
$("#nameDiv").html("My name is " + data.name);
$("#ageDiv").html("My job is " + data.job);
$("#profileImage").attr("src", data.pet);
} else {
$("#status").html("Error: could not find user!");
// clear the profile display
$("#nameDiv").html("");
$("#ageDiv").html("");
$("#profileImage").attr("src", "");
}
},
});
});
$("#updateButton").click(function() {
$.ajax({
// The URL for the request -- note the simple REST API!
// all URLs are relative to http://localhost:3000/
url: "users/" + $("#nameBox").val(),
type: "PUT",
dataType : "text", // this URL returns a plain text string, not JSON
data : { job: $("#jobBox").val(),
pet: $("#petBox").val()
},
success: function( data ) {
console.log("You received some data!", data);
if (data == 'OK') {
$("#status").html("Successfully updated user");
} else {
$("#status").html("Error: could not update user");
}
},
});
});
$("#deleteButton").click(function() {
$.ajax({
// The URL for the request -- note the simple REST API!
// all URLs are relative to http://localhost:3000/
url: "users/" + $("#nameBox").val(),
type: "DELETE",
dataType : "text", // this URL returns a plain text string, not JSON
success: function( data ) {
console.log("You received some data!", data);
if (data == 'OK') {
$("#status").html("Successfully deleted!");
} else {
$("#status").html("Error: could not delete!");
}
},
});
});
});
</script>
</head>
<body>
<h1>Welcome to Fakebook!</h1>
<p>
Name: <input id="nameBox" type="text" size="20"/>
Job: <input id="jobBox" type="text" size="20"/>
Pet: <input id="petBox" type="text" size="20"/>
</p>
<p>
<button id="createButton">Create new user</button>
<button id="readButton">Read user's profile</button>
<button id="updateButton">Update user's profile</button>
<button id="deleteButton">Delete user</button>
</p>
<!-- empty placeholders -->
<div id="nameDiv"></div>
<div id="ageDiv"></div>
<img id="profileImage" style="width: 300px;"/>
<hr/>
<div id="status"></div>
</body>
</html>