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

我正在尝试制作一个接受按钮点击的web应用程序。单击的按钮然后向python应用程序发送特定的设备和操作代码，python应用程序随后使用Lirc调用irsend命令。这基于以下源代码/说明：

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

电源

这将启动js函数：

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

功能点击操作（设备名称，操作）{
$.ajax（{url:'/'+device_name+'/clicked/'+op}）；
}

我知道该函数是在单击事件时触发的，因为如果我在clickedOp函数中放置了一个alert命令，则alert命令将运行

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)

从烧瓶导入烧瓶
从flask导入渲染模板
来自flask导入请求、重定向、url\u
基本URL=“”
app=烧瓶（名称）
@附件路线（“/”）
def菜单（）：
返回渲染模板（'menu.html'）
@附件路线（“/”）
def远程（设备名称）：
如果设备名称=“Xbox”：
返回渲染模板（'Xbox.html'）
@app.route（“//单击/”）
已单击def（设备id=无，op=无）：
返回呈现模板（'test.html'）
如果名称=“\uuuuu main\uuuuuuuu”：
app.run（'0.0.0.0'，端口=80，调试=True）

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

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

将路由到

"/<device_name>" 

“/”

在python程序中，加载“Xbox.html”。 然后，按钮加载并单击它启动“clickedOp（设备名称，op）”功能。 这就是它发生故障的地方。即使ajax请求路由到

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

“//单击/”

“test.html”页面未加载

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

---

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

在代码中，模板将呈现并返回到jquery ajax对象，而jquery ajax对象与之无关-它不会在浏览器中呈现它。您是否使用浏览器的开发人员工具查看浏览器是否收到响应？同样，如果Flask记录HTTP 200 OK，那么我会认为请求得到了正确处理。您还应该能够将print语句放在Flask方法中，并看到它们也被记录下来（我认为）

您可以在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>

$（函数（）{
$（'a#test'）.bind（'click'，function（））{
$.getJSON（“/background\u process\u test”，
功能（数据）{
//无所事事
});
返回false；
});
});
//钮扣
试验

---

在这里，当您按下控制台中的按钮Test simple时，您可以看到显示“Hello”而不进行任何刷新。

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

<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>