forked from orbit-oss/flask
remove javascript fetch polyfill
This commit is contained in:
parent
c7f2ab8e7a
commit
6f6e3289da
7 changed files with 22 additions and 24 deletions
|
|
@ -3,15 +3,15 @@ JavaScript Ajax Example
|
||||||
|
|
||||||
Demonstrates how to post form data and process a JSON response using
|
Demonstrates how to post form data and process a JSON response using
|
||||||
JavaScript. This allows making requests without navigating away from the
|
JavaScript. This allows making requests without navigating away from the
|
||||||
page. Demonstrates using |XMLHttpRequest|_, |fetch|_, and
|
page. Demonstrates using |fetch|_, |XMLHttpRequest|_, and
|
||||||
|jQuery.ajax|_. See the `Flask docs`_ about jQuery and Ajax.
|
|jQuery.ajax|_. See the `Flask docs`_ about JavaScript and Ajax.
|
||||||
|
|
||||||
.. |XMLHttpRequest| replace:: ``XMLHttpRequest``
|
|
||||||
.. _XMLHttpRequest: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
|
|
||||||
|
|
||||||
.. |fetch| replace:: ``fetch``
|
.. |fetch| replace:: ``fetch``
|
||||||
.. _fetch: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
|
.. _fetch: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
|
||||||
|
|
||||||
|
.. |XMLHttpRequest| replace:: ``XMLHttpRequest``
|
||||||
|
.. _XMLHttpRequest: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
|
||||||
|
|
||||||
.. |jQuery.ajax| replace:: ``jQuery.ajax``
|
.. |jQuery.ajax| replace:: ``jQuery.ajax``
|
||||||
.. _jQuery.ajax: https://api.jquery.com/jQuery.ajax/
|
.. _jQuery.ajax: https://api.jquery.com/jQuery.ajax/
|
||||||
|
|
||||||
|
|
@ -21,7 +21,7 @@ page. Demonstrates using |XMLHttpRequest|_, |fetch|_, and
|
||||||
Install
|
Install
|
||||||
-------
|
-------
|
||||||
|
|
||||||
::
|
.. code-block:: text
|
||||||
|
|
||||||
$ python3 -m venv venv
|
$ python3 -m venv venv
|
||||||
$ . venv/bin/activate
|
$ . venv/bin/activate
|
||||||
|
|
@ -31,7 +31,7 @@ Install
|
||||||
Run
|
Run
|
||||||
---
|
---
|
||||||
|
|
||||||
::
|
.. code-block:: text
|
||||||
|
|
||||||
$ export FLASK_APP=js_example
|
$ export FLASK_APP=js_example
|
||||||
$ flask run
|
$ flask run
|
||||||
|
|
@ -42,7 +42,7 @@ Open http://127.0.0.1:5000 in a browser.
|
||||||
Test
|
Test
|
||||||
----
|
----
|
||||||
|
|
||||||
::
|
.. code-block:: text
|
||||||
|
|
||||||
$ pip install -e '.[test]'
|
$ pip install -e '.[test]'
|
||||||
$ coverage run -m pytest
|
$ coverage run -m pytest
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<title>JavaScript Example</title>
|
<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/normalize.css@8.0.1/normalize.css">
|
||||||
<link rel="stylesheet" href="https://unpkg.com/sakura.css@1.0.0/css/sakura-earthly.css">
|
<link rel="stylesheet" href="https://unpkg.com/sakura.css@1.3.1/css/sakura.css">
|
||||||
<style>
|
<style>
|
||||||
ul { margin: 0; padding: 0; display: flex; list-style-type: none; }
|
ul { margin: 0; padding: 0; display: flex; list-style-type: none; }
|
||||||
li > * { padding: 1em; }
|
li > * { padding: 1em; }
|
||||||
|
|
@ -13,10 +13,10 @@
|
||||||
</style>
|
</style>
|
||||||
<ul>
|
<ul>
|
||||||
<li><span>Type:</span>
|
<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 %}">
|
<li class="{% if js == 'fetch' %}active{% endif %}">
|
||||||
<a href="{{ url_for('index', js='fetch') }}">Fetch</a>
|
<a href="{{ url_for('index', js='fetch') }}">Fetch</a>
|
||||||
|
<li class="{% if js == 'xhr' %}active{% endif %}">
|
||||||
|
<a href="{{ url_for('index', js='xhr') }}">XHR</a>
|
||||||
<li class="{% if js == 'jquery' %}active{% endif %}">
|
<li class="{% if js == 'jquery' %}active{% endif %}">
|
||||||
<a href="{{ url_for('index', js='jquery') }}">jQuery</a>
|
<a href="{{ url_for('index', js='jquery') }}">jQuery</a>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -2,14 +2,11 @@
|
||||||
|
|
||||||
{% block intro %}
|
{% block intro %}
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch"><code>fetch</code></a>
|
<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
|
is the <em>modern</em> plain JavaScript way to make requests. It's
|
||||||
supported in all modern browsers except IE, which requires a
|
supported in all modern browsers.
|
||||||
<a href="https://github.com/github/fetch">polyfill</a>.
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% 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>
|
<script>
|
||||||
function addSubmit(ev) {
|
function addSubmit(ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,9 @@
|
||||||
|
|
||||||
{% block intro %}
|
{% block intro %}
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>
|
<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
|
is the original JavaScript way to make requests. It's natively supported
|
||||||
by all browsers.
|
by all browsers, but has been superseded by
|
||||||
|
<a href="{{ url_for("index", js="fetch") }}"><code>fetch</code></a>.
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
|
|
@ -5,8 +5,8 @@ from flask import request
|
||||||
from js_example import app
|
from js_example import app
|
||||||
|
|
||||||
|
|
||||||
@app.route("/", defaults={"js": "plain"})
|
@app.route("/", defaults={"js": "fetch"})
|
||||||
@app.route("/<any(plain, jquery, fetch):js>")
|
@app.route("/<any(xhr, jquery, fetch):js>")
|
||||||
def index(js):
|
def index(js):
|
||||||
return render_template(f"{js}.html", js=js)
|
return render_template(f"{js}.html", js=js)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
[metadata]
|
[metadata]
|
||||||
name = js_example
|
name = js_example
|
||||||
version = 1.0.0
|
version = 1.1.0
|
||||||
url = https://flask.palletsprojects.com/patterns/jquery/
|
url = https://flask.palletsprojects.com/patterns/jquery/
|
||||||
license = BSD-3-Clause
|
license = BSD-3-Clause
|
||||||
maintainer = Pallets
|
maintainer = Pallets
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@ from flask import template_rendered
|
||||||
@pytest.mark.parametrize(
|
@pytest.mark.parametrize(
|
||||||
("path", "template_name"),
|
("path", "template_name"),
|
||||||
(
|
(
|
||||||
("/", "plain.html"),
|
("/", "xhr.html"),
|
||||||
("/plain", "plain.html"),
|
("/plain", "xhr.html"),
|
||||||
("/fetch", "fetch.html"),
|
("/fetch", "fetch.html"),
|
||||||
("/jquery", "jquery.html"),
|
("/jquery", "jquery.html"),
|
||||||
),
|
),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue