orbit-oss/flask
4
4
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add javascript ajax example

Browse source
This commit is contained in:
David Lord 2018-04-12 11:06:02 -07:00
parent d8bf589d48
commit fce1885f76
No known key found for this signature in database
GPG key ID: 7A1C87E3F5BC42A8
21 changed files with 341 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

33
examples/javascript/js_example/templates/base.html Normal file
View file

@ -0,0 +1,33 @@
<!doctype html>
<title>JavaScript Example</title>
<link rel="stylesheet" href="https://unpkg.com/sakura.css@1.0.0/css/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/sakura.css@1.0.0/css/sakura-earthly.css">
<style>
ul { margin: 0; padding: 0; display: flex; list-style-type: none; }
li > * { padding: 1em; }
li.active > a { color: #5e5e5e; border-bottom: 2px solid #4a4a4a; }
form { display: flex; }
label > input { width: 3em; }
form > * { padding-right: 1em; }
#result { font-weight: bold; }
</style>
<ul>
<li><span>Type:</span>
<li class="{% if js == 'plain' %}active{% endif %}">
<a href="{{ url_for('index', js='plain') }}">Plain</a>
<li class="{% if js == 'fetch' %}active{% endif %}">
<a href="{{ url_for('index', js='fetch') }}">Fetch</a>
<li class="{% if js == 'jquery' %}active{% endif %}">
<a href="{{ url_for('index', js='jquery') }}">jQuery</a>
</ul>
<hr>
<p>{% block intro %}{% endblock %}</p>
<hr>
<form>
<label>a <input name="a"></label>
<span>+</span>
<label>b <input name="b"></label>
<input type="submit" value="Calculate">
</form>
<span>= <span id="result"></span></span>
{% block script %}{% endblock %}

35
examples/javascript/js_example/templates/fetch.html Normal file
View file

@ -0,0 +1,35 @@
{% extends 'base.html' %}
{% block intro %}
<a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch"><code>fetch</code></a>
is the <em>new</em> plain JavaScript way to make requests. It's
supported in all modern browsers except IE, which requires a
<a href="https://github.com/github/fetch">polyfill</a>.
{% endblock %}
{% block script %}
<script src="https://unpkg.com/promise-polyfill@7.1.2/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/whatwg-fetch@2.0.4/fetch.js"></script>
<script>
function addSubmit(ev) {
ev.preventDefault();
fetch('{{ url_for('add') }}', {
method: 'POST',
body: new FormData(this)
})
.then(parseJSON)
.then(addShow);
}
function parseJSON(response) {
return response.json();
}
function addShow(data) {
var span = document.getElementById('result');
span.innerText = data.result;
}
document.forms[0].addEventListener('submit', addSubmit);
</script>
{% endblock %}

27
examples/javascript/js_example/templates/jquery.html Normal file
View file

@ -0,0 +1,27 @@
{% extends 'base.html' %}
{% block intro %}
<a href="https://jquery.com/">jQuery</a> is a popular library that
adds cross browser APIs for common tasks. However, it requires loading
an extra library.
{% endblock %}
{% block script %}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function addSubmit(ev) {
ev.preventDefault();
$.ajax({
method: 'POST',
url: '{{ url_for('add') }}',
data: $(this).serialize()
}).done(addShow);
}
function addShow(data) {
$('#result').text(data.result);
}
$('form:first').on('submit', addSubmit);
</script>
{% endblock %}

27
examples/javascript/js_example/templates/plain.html Normal file
View file

@ -0,0 +1,27 @@
{% extends 'base.html' %}
{% block intro %}
<a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>
is the plain JavaScript way to make requests. It's natively supported
by all browsers.
{% endblock %}
{% block script %}
<script>
function addSubmit(ev) {
ev.preventDefault();
var request = new XMLHttpRequest();
request.addEventListener('load', addShow);
request.open('POST', '{{ url_for('add') }}');
request.send(new FormData(this));
}
function addShow() {
var data = JSON.parse(this.responseText);
var span = document.getElementById('result');
span.innerText = data.result;
}
document.forms[0].addEventListener('submit', addSubmit);
</script>
{% endblock %}