Jquery按钮点击用Flask和Python发送AJAX请求

Question

我正在尝试制作一个接受按钮点击的网络应用程序。单击的按钮会将特定设备和操作代码发送到 python 应用程序，然后该应用程序使用 Lirc 调用 irsend 命令。这是基于此处的源代码/说明：

https://github.com/slimjim777/web-irsend

http://randomtutor.blogspot.com/2013/01/web-based-ir-remote-on-raspberry-pi.html

该按钮的 html 很简单，位于“Xbox.html”中

<button onclick="clickedOp('Xbox', 'OnOff');"> Power </button>

这将启动 js 函数：

<script>
function clickedOp(device_name, op) {
    $.ajax({url:'/' + device_name + '/clicked/' + op});
}

我知道该函数在单击事件上触发，因为如果我在 clickedOp 函数中放置警报命令，警报命令就会运行

python/flask 应用程序如下所示：

from flask import Flask
from flask import render_template
from flask import request, redirect, url_for

BASE_URL = ''

app = Flask(__name__)


@app.route("/")
def menu():
    return render_template('menu.html')

@app.route("/<device_name>")
def remote(device_name):
    if device_name == "Xbox":
        return render_template('Xbox.html')


@app.route("/<device_name>/clicked/<op>")
def clicked(device_id=None, op=None):
    return render_template('test.html')

if __name__ == "__main__":
    app.run('0.0.0.0', port=80, debug=True)

ajax 请求之前的所有代码都有效。例如，转到“/”会加载 menu.html 模板并显示指向不同设备的链接

<a href="Xbox"> Xbox </a>

将路由至

"/<device_name>" 

在 python 程序中，并加载“Xbox.html”。然后按钮加载并单击它会触发“clickedOp(device_name, op)”函数。这就是它崩溃的地方。即使ajax请求路由到

"/<device_name>/clicked/<op>" 

“test.html”页面未加载

即使 Flask 调试器说有一个成功的 GET 请求（它返回 200）到“/Xbox/clicked/OnOff”（填写上面示例的变量），情况也是如此

那么，当我提供的源代码/教程中似乎他使用相同的ajax方法时，为什么不从ajax请求加载test.html，有什么想法吗？

Answer 1

您可以在 AJAX 的帮助下简单地完成此操作...下面是一个调用 python 函数的示例，该函数在不重定向或刷新页面的情况下打印 hello。

在 app.py 中放置以下代码段。

//rendering the HTML page which has the button
@app.route('/json')
def json():
    return render_template('json.html')

//background process happening without any refreshing
@app.route('/background_process_test')
def background_process_test():
    print "Hello"
    return "nothing"

您的 json.html 页面应如下所示。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
    $(function() {
      $('a#test').on('click', function(e) {
        e.preventDefault()
        $.getJSON('/background_process_test',
            function(data) {
             console.log(data)
        });
      });
    });
</script>


//button
<div class='container'>
<h3>Test</h3>
    <form>
        <a href=# id=test><button class='btn btn-default'>Test</button></a>
    </form>

</div>

在这里，当您在控制台中按下“Test simple”按钮时，您可以看到“Hello”正在显示，没有任何刷新。