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