Jquery 按钮单击以使用 Flask 和 Python 发送 AJAX 请求答案

【问题标题】：Jquery button click to send AJAX request with Flask and PythonJquery 按钮单击以使用 Flask 和 Python 发送 AJAX 请求
【发布时间】：2013-07-19 12:14:20
【问题描述】：

我正在尝试制作一个接受按钮点击的 Web 应用程序。单击的按钮然后将特定设备和操作代码发送到 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”（填写上面示例的变量），情况也是如此

所以有什么想法为什么 test.html 没有从 ajax 请求中加载，而在我提供的源代码/教程中，他似乎使用了相同的 ajax 方法？

【问题讨论】：

我认为，如果您看到“/XBox/clicked/OnOff”请求的 HTTP 200 OK，那么 Flask 应用程序的行为正确。您的 Jquery 代码只是触发了一个 Ajax 请求——您没有显示任何响应处理程序。没有它们，当响应到达时页面将不会做任何事情。您是否只是将它们排除在您发布的代码之外？
@SteveAllison 我没有对响应做任何事情，因为不需要响应来获得所需的效果，这只是运行附加到由 ajax 请求发送的 url 的 python 函数，而后者又运行python 中的子进程调用，就像我上面链接的源代码一样。据我所知，他对任何类型的响应都不做任何事情，甚至不返回 render_template 命令。我这样做的唯一原因是测试它是否正在运行 python 函数，因为如果是，那么模板应该呈现正确吗？我只使用 ajax，所以每次点击都不需要重新加载页面
在代码中，模板将呈现并返回给 jquery Ajax 对象，它不会对它做任何事情 - 它不会在浏览器中呈现它。您是否使用过浏览器的开发人员工具来查看浏览器是否收到响应 - 再次，如果 Flask 记录 HTTP 200 OK，那么我会想象该请求得到了正确处理。您还应该能够将打印语句放入您的 Flask 方法中并查看它们的记录（我认为）。
我明白你在说什么。如果 Flask 方法正在运行，我希望模板能够被呈现，但它实际上可能正在运行并返回它，但除非我让 ajax 请求对从服务器返回的模板执行某些操作，否则不会显示它。在那种情况下，它实际上会在我需要的方法中运行一个子进程调用。不幸的是，我现在无法对此进行测试，但我会尽快进行测试，谢谢！
没问题。我觉得这是一个有趣的小项目！

标签： python jquery jquery-mobile flask

【解决方案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').bind('click', function() {
        $.getJSON('/background_process_test',
            function(data) {
          //do nothing
        });
        return false;
      });
    });
</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”正在显示而没有任何刷新。

【讨论】：

【解决方案2】：

在代码中，模板将呈现并返回给 jquery Ajax 对象，它不会对它做任何事情 - 它不会在浏览器中呈现它。您是否使用浏览器的开发人员工具来查看浏览器是否收到响应 - 再次，如果 Flask 记录 HTTP 200 OK，那么我会想象请求正在被正确处理。您还应该能够将打印语句放入您的 Flask 方法中并查看它们的记录（我认为）。

【讨论】：