Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
80 lines (60 sloc) 1.64 KB
<html>
<!--
Lecture 7 - CSC 210 Fall 2015
Philip Guo
-->
<head>
<title>Web 2.0 demo</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log("Hello world!");
$("#lookupButton").click(function() {
var nameToLookup = $("#nameBox").val();
console.log(nameToLookup);
// From: http://learn.jquery.com/ajax/jquery-ajax-methods/
// Using the core $.ajax() method
$.ajax({
// The URL for the request
url: "cgi-bin/lecture7.py",
// The data to send (will be converted to a query string)
data: {
requested_name: nameToLookup
},
// Whether this is a POST or GET request
type: "GET",
// The type of data we expect back
//dataType : "text",
dataType : "json",
// Code to run if the request succeeds;
// the response is passed to the function
success: function( data ) {
console.log("You received some data!");
console.log(data);
console.log(data.myName);
console.log(data.myAge);
console.log(data.myImage);
$("#nameDiv").html("My name is " + data.myName);
$("#ageDiv").html("My age is " + data.myAge);
$("#profileImage").attr("src", data.myImage);
},
// Code to run if the request fails
error: function() {
alert( "Sorry, there was a problem!" );
},
});
});
});
</script>
</head>
<body>
<h1>Welcome!</h1>
<p>
Name: <input id="nameBox" type="text" size="30"/>
<button id="lookupButton">Get profile</button>
</p>
<div id="nameDiv">Your Name</div>
<div id="ageDiv">Your Age</div>
<img id="profileImage" src="truck.jpg" style="width: 300px;"/>
</body>
</html>