<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>RESTful API demo</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css"> * { outline: none; } body { background-color: #789; margin: 0; padding: 0; font: 16px/1.4 Helvetica, Arial, sans-serif; font: 16px/1.4 Helvetica, Arial, sans-serif; } div.content { width: 800px; margin: 2em auto; padding: 20px 50px; background-color: #fff; border-radius: 1em; } label { display: inline-block; min-width: 7em; } input { border: 1px solid #ccc; padding: 0.2em; } a:link, a:visited { color: #69c; text-decoration: none; } @media (max-width: 700px) { body { background-color: #fff; } div.content { width: auto; margin: 0 auto; padding: 1em; } } </style> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script language="javascript" type="text/javascript"> jQuery(function() { $(document).on('keyup', '#n1, #n2', function() { $.ajax({ url: '/api/v1/sum', method: 'POST', dataType: 'json', data: { n1: $('#n1').val(), n2: $('#n2').val() }, success: function(json) { $('#result').html(json.result); } }); }); }); </script> </head> <body> <div class="content"> <h1>RESTful API demo.</h1> <p> This page demonstrates how Mongoose could be used to implement RESTful APIs. Start typing numbers into the text fields below. Browser sends two numbers to <tt>/api/v1/sum</tt> URI. Web server calclulates the sum and returns the result. </p> <div> <label>Number 1:</label> <input type="text" id="n1" /> </div><div> <label>Number 2:</label> <input type="text" id="n2" /> </div><div> <label>Result:</label> <span id="result"> </span> </div><div> </div> </body> </html>