Fatal编程技术网
  • python/
  • Python 如何更改元素'；当rest请求到达烧瓶时，它的颜色（在html页面中）？

Python 如何更改元素'；当rest请求到达烧瓶时，它的颜色（在html页面中）？

python html css rest flask

Python 如何更改元素'；当rest请求到达烧瓶时，它的颜色（在html页面中）？,python,html,css,rest,flask,Python,Html,Css,Rest,Flask,我有一个带有一些元素的html文件和一个python文件，该文件使用flask处理请求，如下所示： @app.route('/changeColor', methods=['POST']) def change_color(): colors = ['red', 'black', 'purple', 'yellow', 'white', 'pink', 'grey', 'green'] i = random.randint(0, 2) rand_col = colors[

我有一个带有一些元素的html文件和一个python文件，该文件使用flask处理请求，如下所示：

@app.route('/changeColor', methods=['POST'])
def change_color():
    colors = ['red', 'black', 'purple', 'yellow', 'white', 'pink', 'grey', 'green']
    i = random.randint(0, 2)
    rand_col = colors[i]
    return rand_col
任何人向这个URL发送请求，它都会返回一个随机颜色，但我想要的是，当有人向这个URL发送请求时，它会动态地更改我HTML页面中某个元素的背景颜色（我的意思是我不希望我的页面重新加载或其他内容）。任何建议都会对我有所帮助。

。首先，你好

这不仅仅是python的问题。现在是系统架构问题

更好的方法是使用套接字连接来完成此任务。 我们将向html页面添加javascript对象，该页面将创建到后端的连接，并等待来自后端的消息：

const socket = new WebSocket('ws://localhost:8080');
当然，我们会将套接字侦听器添加到后端部分。 它可以是任何使用WebSocket的库： 也许吧。通常，我使用第二个

在我们系统的后端和前端部分创建套接字侦听器后-这将按以下方式工作：

  • 用户使用javascript打开html页面

  • Javascript打开了与后端的套接字连接

  • 后端接受的连接

    • 现在所有打开的页面都将等待来自后端的一些消息。 我们应该在后端升级侦听器：） 这个监听器（通过无限循环24/7工作-最好的正确方法-查看）将检查数据库/文件/进程/某些东西（这是另一个问题），以了解对API的新的成功请求，并将消息发送到所有打开的套接字。在前端部分，javascript将从套接字连接获得消息，并将为DOM元素呈现新的颜色

    这个系统中有很多东西都应该经过深思熟虑，但我认为这是一种你想做的事情。当然，这是一种了解如何做到这一点以及更多的方法。

    所以，好吧。首先，你好

    这不仅仅是python的问题。现在是系统架构问题

    更好的方法是使用套接字连接来完成此任务。 我们将向html页面添加javascript对象，该页面将创建到后端的连接，并等待来自后端的消息：

    const socket = new WebSocket('ws://localhost:8080');
    当然，我们会将套接字侦听器添加到后端部分。 它可以是任何使用WebSocket的库： 也许吧。通常，我使用第二个

    在我们系统的后端和前端部分创建套接字侦听器后-这将按以下方式工作：

  • 用户使用javascript打开html页面

  • Javascript打开了与后端的套接字连接

  • 后端接受的连接

    • 现在所有打开的页面都将等待来自后端的一些消息。 我们应该在后端升级侦听器：） 这个监听器（通过无限循环24/7工作-最好的正确方法-查看）将检查数据库/文件/进程/某些东西（这是另一个问题），以了解对API的新的成功请求，并将消息发送到所有打开的套接字。在前端部分，javascript将从套接字连接获得消息，并将为DOM元素呈现新的颜色

    这个系统中有很多东西都应该经过深思熟虑，但我认为这是一种你想做的事情。当然，这是一种了解如何做到这一点以及更多的方法。

    我将准确地回答这个问题，尽管要知道设置页面颜色可以完全在前端完成，并且可能不需要向服务器请求以获得实际颜色

    现在完美地解释了单独使用Javascript来实现这一点，并避免每次有人更改颜色时向服务器发出该请求

    如果您确实希望向服务器发出此请求（例如，出于学习目的），您可以这样做。让我们稍微修改一下烧瓶路线，以说明以下几点：

    @app.route('/changeColor', methods=['GET'])
def change_color():
    colors = ['red', 'black', 'purple', 'yellow', 'white', 'pink', 'grey', 'green']
    i = random.randint(0, len(colors)-1)
    rand_col = colors[i]
    return {'color': rand_col}, 200
    我们有：

    • 已将请求方法更改为获取
    • 更改了随机化行，以说明
      颜色列表的长度。向列表中添加更多项目将自动将它们全部包含在随机选择中
    • 返回一个带有键
      'color'
      和值
      rand\u col
      的字典。flask将自动将此词典转换为JSON。此外，我们还添加了
      200
      响应代码
    • 在这里，我们添加了一个单独的路径来呈现前端模板，用户点击此页面，
      change\u color
      路径专门处理返回颜色的问题
    现在是模板。实际上，出于安全原因，我使用了cloudflare的CDN中包含的jquery以及SNI标记

    我们使用类
    changecolor
    在HTML中创建一个按钮，然后在单击按钮时使用Jquery选择器调用AJAX函数

    这是
    模板/index.html
    的内容：

    <html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
  <p>I am the page text.</p>
  <button class="changecolor" type="button">Change my Colour</button>
<script type='text/javascript'>
$(function() {
  // This catches the button click
  $('.changecolor').click(function() {

    // This does the ajax call to the server (GET Request)
      $.ajax({
        type: 'GET',
        // Dynamically set the URL for the python `change_color`
        // function.
        url: '{{ url_for("change_color") }}',
        success: function(data) {
          // Actually set the page color, if the request is suecessful
          document.body.style.backgroundColor = data['color']; 
      }
    });
  });
});
</script>
</body>
</html>

    
我是页面文本
    
改变我的颜色
$（函数（）{
//这抓住了按钮的点击
$（'.changecolor'）。单击（函数（）{
//这将执行对服务器的ajax调用（GET请求）
$.ajax({
键入：“GET”，
//动态设置python“更改颜色”的URL`
//功能。
url:“{{url}用于（“更改颜色”）}”，
成功：功能（数据）{
//如果请求成功，请实际设置页面颜色
document.body.style.backgroundColor=数据['color']；
}
});
});
});
    • 请注意，我们没有将URL作为
      /changeColor
      提供，而是使用了Jinja2的模板功能，这次是
      URL\u for
      函数为Python代码中的
      change\u color
      函数动态设置相应的URL
    现在，在前端，您应该能够单击按钮并更改页面颜色：

    我将准确地回答这个问题，不过请注意，设置页面颜色可以完全在前端完成，可能不需要重新设置