Last active
March 12, 2020 23:09
Star
You must be signed in to star a gist
Respond to an AJAX call with a CGI program
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
Program: inch to centimeter converter | |
Author: Michael Chen | |
License: Apache 2.0 | |
--> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<meta name="description" content="Inch to centimeter converter"> | |
<title>Inch to Centimeter</title> | |
<!-- Bootstrap CSS --> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" | |
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script> | |
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |
<!--[if lt IE 9]> | |
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> | |
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
<![endif]--> | |
</head> | |
<body> | |
<div class="container"> | |
<div class='page-header' style='margin-top: 10pt;'> | |
<h1>Inch to Centimeter Converter</h1> | |
</div> | |
<div id='message'></div> | |
<div class='form-inline'> | |
<div class="form-group mx-sm-3 mb-2"> | |
<label for="inch2cm" class="sr-only">Inch to Centimeter</label> | |
<input type="text" class="form-control" id="inch2cm" placeholder="Inch"> | |
</div> | |
<button type="submit" class="btn btn-primary mb-2" id='btnInch2CM'>Convert</button> | |
</div> | |
<div id='info'></div> | |
</div> | |
<!-- Bootstrap.Native, V4 version --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.26/bootstrap-native-v4.min.js" | |
integrity="sha256-GlvYPu8qg3GLj5W5pC8VbjXiw+HhzSyVaWYV27ibTJY=" crossorigin="anonymous"></script> | |
<!-- SuperAgent --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/4.1.0/superagent.min.js" | |
integrity="sha256-XwGIb0dW2d+hM8XPl9RcTbaNJoTfQ/xKV1n5EBYH0n4=" crossorigin="anonymous"></script> | |
<script> | |
function showMessage(message) { | |
let msg = document.getElementById('message'); | |
msg.innerHTML = | |
'<div class="alert alert-warning" role="alert">' | |
+ message | |
+ '</div>'; | |
} | |
function clearMessage() { | |
let msg = document.getElementById('message'); | |
msg.innerHTML = ''; | |
} | |
function showInfo(data) { | |
let info = document.getElementById('info'); | |
info.innerHTML = | |
'<div class="alert alert-info" role="alert">' | |
+ data | |
+ '</div>'; | |
} | |
function clearInfo() { | |
let info = document.getElementById('info'); | |
info.innerHTML = ''; | |
} | |
let btn = document.getElementById('btnInch2CM'); | |
btn.addEventListener('click', function () { | |
/* Get value from input. */ | |
let value = document.getElementById('inch2cm').value; | |
if ('' === value) { | |
clearInfo() | |
showMessage('No data'); | |
} else { | |
clearMessage(); | |
/* Clear old value. */ | |
document.getElementById('inch2cm').value = ''; | |
superagent | |
.put('/cgi-bin/inch2cm.cgi') | |
.send({ data: value }) | |
.then(function (res) { | |
showInfo(res.body.data); | |
}) | |
.catch(function (err) { | |
if (err.response) { | |
showMessage(err.response.message); | |
} else { | |
showMessage(err); | |
} | |
}); | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment