简单地将 JavaScript 中的 GET 请求获取到 Flask 服务器

2023-11-21

我正在尝试将一些 json 数据从 Flask 服务器显示到我的 html 页面,但我有一个TypeError: NetworkError when attempting to fetch resource. with a Promise { <state>: "rejected" }.

服务器.py

from flask import Flask, request, jsonify

app = Flask(__name__)


@app.route('/hello', methods=['GET'])
def hello():
    jsonResp = {'jack': 4098, 'sape': 4139}
    print(jsonify(jsonResp))
    return jsonify(jsonResp)

if __name__ == '__main__':
    app.run(host='localhost', port=8989)

脚本.js

function getHello() {
    const url = 'http://localhost:8989/hello'
    const response = fetch(url)
    console.log(response);
    document.getElementById("demo").innerHTML = response;
}

索引.html

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
</head>
<body>
    <button onclick="getHello()">click</button>
    <label id="demo"></label>

    <script src="script.js"></script>
</body>
</html>

我也有一个[object Promise]当我单击按钮时在标签部分中。

我做了最简单的代码,但它不起作用。


谢谢大家的好回答:) 这是我的最终代码:

服务器.py

from flask import Flask, request, jsonify, after_this_request

app = Flask(__name__)


@app.route('/hello', methods=['GET'])
def hello():
    @after_this_request
    def add_header(response):
        response.headers.add('Access-Control-Allow-Origin', '*')
        return response

    jsonResp = {'jack': 4098, 'sape': 4139}
    print(jsonResp)
    return jsonify(jsonResp)

if __name__ == '__main__':
    app.run(host='localhost', port=8989)

脚本.js

function getHello() {
    const url = 'http://localhost:8989/hello'
    fetch(url)
    .then(response => response.json())  
    .then(json => {
        console.log(json);
        document.getElementById("demo").innerHTML = JSON.stringify(json)
    })
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

简单地将 JavaScript 中的 GET 请求获取到 Flask 服务器 的相关文章

随机推荐

  • 如何使用 PHP 以编程方式构建 APR1-MD5

    很像这个问题我想从 PHP 生成 htpasswd 文件条目 然而 正如原始答案中提到的 答案没有显示如何实现 APR1 风格 它需要是 APR1 Apache 风格 才能与 mod dav svn 一起使用 我似乎找不到可以创建密码的有效
  • 故事板中的 initWithNibName 方法

    我正在按照 Facebook 的教程发布到用户的墙上 http developers facebook com docs howtos publish to feed ios sdk 尽管它是根据 xib 项目制作的 但到目前为止 我的故事
  • 发送投票电子邮件

    使用 Outlook API 可以通过在 MailItem 实例上设置 VotingOpions 属性来发送带有民意调查的电子邮件 是否可以以任何方式对 Exchange Web 服务执行相同的操作 Microsoft 已经发布了投票电子邮
  • 在Python中将点后的浮点四舍五入到2位数字

    我正在使用这段代码 f 0 3223322 float 2f f 有没有更Pythonic 更简洁的方法 无需两次转换 使用round文档中的以下注释令人沮丧 round 对于浮点数的行为可能会令人惊讶 例如 round 2 675 2 给
  • 在 pandas MultiIndex 前面添加一个级别

    我有一个 DataFrame 其中经过一些分组后创建了 MultiIndex import numpy as np import pandas as pd from numpy random import randn df pd DataF
  • 如何使用mockito验证公共类的静态方法被调用?

    伪代码是这样的 rc SomePublicClass myPublicStaticFunc arg public class SomePublicClass private SomePublicClass public static int
  • 创建过程中忽略 Config.xml

    我在使用命令行工具时遇到问题科尔多瓦 cli 我遵循了从文档 cordova create test com test 测试 在这一步中我要更改的内容www folder 1 将示例网页移至src文件夹 所以内容www are www co
  • git 子模块添加致命错误:不是 Git 存储库

    我对 Git 相当陌生 并尽力寻找有关此问题的一些文档 但无济于事 这是我的命令 git submodule add https github com joliver EventStore git externalsource JOlive
  • IEnumerator 是否有“HasNext”方法?

    使用JavaIterators 我已经用过hasNext确定迭代是否有更多元素的方法 不消耗元素 因此 hasNext就像一个 Peek 方法 我的问题 有没有类似 hasNext or Peek 具有 C 泛型的方法IEnumerator
  • 在 Apple Swift 中,在什么情况下我不想要隐式展开的可选选项?

    我相信我理解为什么可选值很方便 我最好的使用想法是能够返回一个 nil 布尔值 但是在什么情况下我想使用 声明一个包装的可选值 而不是 对于隐式解包的可选 似乎没有必要用 来声明它 然后必须打字 到处都是 而不仅仅是使用 一次 我不想忽视
  • Typescript 中的类型推断与显式类型声明

    我遇到过几个不同的代码实例 其中变量使用显式类型声明 即使推断的类型很明显 例子 loading boolean false or name string John or count number 0 etc TSLint 更喜欢推断类型而
  • Node.js - 使用每秒 5 个请求的 API 限制

    我有一个 脚本 可以对特定 API 执行数千个请求 这个 API 每秒只允许 5 个请求 可能它的测量结果与我不同 提出我正在使用的请求request promise框架 我已经取代了正常的request promise与此功能 const
  • org.hibernate.PropertyAccessException:IllegalArgumentException

    我正在研究 hibernate 映射 除了当 hibernate 尝试将我的对象保留到系统中时遇到的 PropertyAccessException 之外 其他一切都工作正常 下面是堆栈跟踪 org hibernate PropertyAc
  • 使用角色模拟租户

    我们正在开发一个基于 keycloak 5 0 0 的解决方案 我们的客户可以在我们这里创建他们的帐户并管理他们自己的用户 并且仅管理他们的用户 最初我们认为我们可以使用领域来实现这一点 每个客户都有自己的领域 经过初步测试后 我们认为这可
  • Python脚本通过FTP上传文件

    我想编写一个脚本来将文件上传到 FTP 登录系统如何工作 我正在寻找这样的东西 ftp login mylogin ftp pass mypass 以及任何其他登录凭据 Use ftplib 你可以这样写 import ftplib ses
  • 从 gitignore 过滤文件和路径

    我想找到所有文件路径not使用 C 通过 gitignore 或子目录中任何嵌套的 gitignore 文件 进行过滤 这类似于在这里提问关于PHP 我想知道是否有人知道这段代码是否已在网上某处提供 以 C 形式 更新 为了回答我想要这个的
  • 在 SQL 中选择不同的值对

    我有一个 Access 2010 数据库 其中存储源计算机和目标计算机的 IP 地址 如果我的数据库中有以下条目 source destination A B B A A B C D D D 是否有任何查询来选择唯一对 也就是说 查询的输出
  • 在 python 中捕获 Ctrl+C / SIGINT 并优雅地退出多进程[重复]

    这个问题在这里已经有答案了 How do I catch a Ctrl C in multiprocess python program and exit all processes gracefully I need the soluti
  • 如何阻止 Symfony 记录 Doctrine 的 sql 查询?

    我有一个奇怪的问题 当我检查我的app log dev log我可以在我的页面中看到几乎所有的查询dev log正在实时登录 2015 01 27 06 57 22 doctrine DEBUG SELECT t0 username A 2
  • 简单地将 JavaScript 中的 GET 请求获取到 Flask 服务器

    我正在尝试将一些 json 数据从 Flask 服务器显示到我的 html 页面 但我有一个TypeError NetworkError when attempting to fetch resource with a Promise