如何从 HTML 转到 python，返回到 html，然后更改处理脚本中的变量？答案

【问题标题】：How to go from HTML to python, return to html, then alter a variable in a processing script?如何从 HTML 转到 python，返回到 html，然后更改处理脚本中的变量？
【发布时间】：2017-05-23 23:05:38
【问题描述】：

我的项目：

我想制作一个简单的网页（仅在我的本地机器上运行 - 未连接到互联网），当您按下客户端上的按钮时，运行一个运行 dejavu 的 python 脚本，并返回标题这首歌曲。然后，我想使用歌曲标题来更改处理脚本中的变量，这将根据歌曲显示不同的可视化。

到目前为止，我有一个可以工作的 Python 脚本 (testPython.py)，它可以识别一首歌曲并将标题作为字符串返回：

from dejavu import Dejavu
from dejavu.recognize import MicrophoneRecognizer
main():
    config = {
        "database": {
            "host": "127.0.0.1",
            "user": "root",
            "passwd": "Password",
            "db": "dejavu",
        }
    }
    djv = Dejavu(config)
    song = djv.recognize(MicrophoneRecognizer, seconds=10)
    return song.get("song_name") #this is a string

我有 html + AJAX 脚本，可以调用 python 函数并基于它更改 HTML 元素，以及带有处理脚本的 canvas 元素

    $('button').click(function(){
      $.ajax({
         url: "testPython.py",
         success: function(response) {
             $("#test").css("color", "red");
         }
        });
    });

    .
    .
    .

    <canvas data-processing-sources="testProcessing.pde"></canvas>

而且我有一个处理脚本（基于变量的输出变化没有实现，但应该不复杂）

    void setup(){
    ...
    }

    void draw(){
    ...
    }

我如何把这些放在一起，所以 python/dejavu 的结果会影响处理脚本的输出？

（我也知道这很混乱；除了 python 和 html 之外，我对这里的几乎所有东西都是新手，而且我高估了项目的复杂性）

【问题讨论】：

其中哪一部分不起作用？
从python获取返回值并发送到处理脚本。通过 AJAX 访问 python 代码时，我对如何使用返回值来更改处理代码中的某些内容感到困惑。您的回答有助于“在处理代码中使用它”部分，而不是“从 AJAX 获取返回值”部分
那是一个单独的问题。你需要把你的问题分解成更小的步骤。第一步是将其从 AJAX 转换为 JavaScript。另一个是从 JavaScript 到处理。但我不确定你的问题是什么——你不能只设置一个值或从 AJAX 回调中调用一个函数吗？

标签： jquery python html ajax processing

【解决方案1】：

请参阅the Processing.js JavaScript Quick Start Guide 的编写结合处理和 JavaScript 代码的文档部分。

该指南准确解释了如何混合 Processing.js 和 JavaScript。

具体来说，您有两个选择：让 Processing.js 代码调用 JavaScript 函数和变量，或者让 JavaScript 代码调用 Processing 函数。

最后都被转换成 JavaScript，所以都是一样的东西。

另外，请养成将问题分解成小块的习惯。你说你已经让 Python 部分工作了，所以现在将其余部分隔离在一个更简单的示例中，该示例使用 JavaScript 中的硬编码变量，你想在 Processing 中获取。尝试整理一个小示例（最好在 JSFiddle 或 CodePen 上），如果遇到困难，请发布指向该示例的链接（在新问题中）。祝你好运。

【讨论】：