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>