remove javascript fetch polyfill

This commit is contained in:
David Lord 2022-02-14 10:33:25 -08:00
parent c7f2ab8e7a
commit 6f6e3289da
No known key found for this signature in database
GPG key ID: 7A1C87E3F5BC42A8
7 changed files with 22 additions and 24 deletions

View file

@ -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

View file

@ -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>

View file

@ -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();

View file

@ -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 %}

View file

@ -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)

View file

@ -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

View file

@ -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"),
), ),