CIS 119 - Ajax hands-on I (jQuery version)
Get a fortune (jQuery version)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fortune</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
window.onload = function() {
getFortune();
$('#btnGames').click( function () { getFortune() });
}
function getFortune() {
$.get("getFortune.php",
function(msg) {
$('#first').html('<p>'+msg.replace(/\n/g,'</p><p>')+'</p>');
},
"text"
);
}
</script>
</head>
<body>
<p id="first"></p>
<p><button id="btnGames">Get new fortune</button></p>
</body>
</html>
Do a simple calculation (jQuery version)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Calculation</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
window.onload = function() {
$('#btnCalc').click( function () { calc() });
}
function calc() {
$.get("docalc.php",
{ "x" : $('#x').val(), "y" : $('#y').val() },
function(msg) {
$('#result').val(msg);
},
"text"
);
}
</script>
</head>
<body>
<p><input type="text" id="x" /> *
<input type="text" id="y" /> =
<input type="text" readonly id="result"></p>
<p><button id="btnCalc">Do calculation</button></p>
</body>
</html>