根据\u button（）返回的内容在两个选项之间切换。这完全是在浏览器中，与Flask无关，真的。我将用jQuery重新标记您的问题。谢谢Martijn，我将根据您的提示尝试解决它！谢谢你的重播。我测试了你的代码，但它不起作用，尽管它似乎合乎逻辑。刷新时_Jquery_Python_Flask

根据\u button（）返回的内容在两个选项之间切换。这完全是在浏览器中，与Flask无关，真的。我将用jQuery重新标记您的问题。谢谢Martijn，我将根据您的提示尝试解决它！谢谢你的重播。我测试了你的代码，但它不起作用，尽管它似乎合乎逻辑。刷新时

jquery python flask

根据\u button（）返回的内容在两个选项之间切换。这完全是在浏览器中，与Flask无关，真的。我将用jQuery重新标记您的问题。谢谢Martijn，我将根据您的提示尝试解决它！谢谢你的重播。我测试了你的代码，但它不起作用，尽管它似乎合乎逻辑。刷新时,jquery,python,flask,Jquery,Python,Flask,根据\u button（）返回的内容在两个选项之间切换。这完全是在浏览器中，与Flask无关，真的。我将用jQuery重新标记您的问题。谢谢Martijn，我将根据您的提示尝试解决它！谢谢你的重播。我测试了你的代码，但它不起作用，尽管它似乎合乎逻辑。刷新时，即使系统处于待命状态，按钮的状态也会显示为关闭。按钮状态是保持关闭还是在前0.5秒后更改？在原始代码和JSFIDLE中，更新UI中按钮状态的函数（“button（）”）只在0.5秒后发生。定义完按钮函数后，可以通过调用“button（）”使其

根据

\u button（）

返回的内容在两个选项之间切换。这完全是在浏览器中，与Flask无关，真的。我将用jQuery重新标记您的问题。谢谢Martijn，我将根据您的提示尝试解决它！谢谢你的重播。我测试了你的代码，但它不起作用，尽管它似乎合乎逻辑。刷新时，即使系统处于待命状态，按钮的状态也会显示为关闭。按钮状态是保持关闭还是在前0.5秒后更改？在原始代码和JSFIDLE中，更新UI中按钮状态的函数（“button（）”）只在0.5秒后发生。定义完按钮函数后，可以通过调用“button（）”使其立即执行。我已经更新了JSFIDLE来显示这一点。它一直处于关闭状态，即使它处于打开状态，但在刷新时它会再次关闭。再次感谢您的关注。我刚刚注意到select元素的值是“开”和“关”，但是Flask代码返回“armed”和“disarmed”。您需要在两个状态值之间进行转换（例如，如果state==“armed”：state=“on”）或者只使用一组状态值。我已经更新了答案。如果这不起作用，我只能建议在Python代码和“console.log（）中放入“print”语句来测试代码中的假设“JavaScript中的语句。我最终找到了答案，我将其作为答案提交。过来看。再次感谢你，本！做得好！这是滑块刷新上的API文档。我已经在上面的答案中添加了这一点，以防有人想要复制和粘贴它

from flask import Flask, render_template, request, jsonify
import test
app = Flask(__name__)

# return index page when IP address of RPi is typed in the browser
@app.route("/")
def Index():
    return render_template("index.html", uptime=GetUptime())

# ajax GET call this function to set led state
# depeding on the GET parameter sent
@app.route("/_led")
def _led():
    state = request.args.get('state')
    if state=="on":
        test.arm()
        test.write1()
        print test.read()
    else:
        test.disarm()
        test.write0()
        print test.read()
    return ""

# ajax GET call this function periodically to read button state
# the state is sent back as json data
@app.route("/_button")
def _button():
    if (test.read() == "1"):
        state = "armed"
    else:
        state = "disarmed"
    return jsonify(buttonState=state)

def GetUptime():
    # get uptime from the linux terminal command
    from subprocess import check_output
    output = check_output(["uptime"])
    # return only uptime info
    uptime = output[output.find("up"):output.find("user")-5]
    return uptime

# run the webserver on standard port 80, requires sudo
if __name__ == "__main__":
    test.initialize_Output()
    app.run(host='0.0.0.0', port=80, debug=True)

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>

        <style>
            h3, h4 {text-align: center;}
            span {font-weight: bold;}
        </style>

        <script type=text/javascript>
            $(function() {
                // When the LED button is pressed (change)
                // do an ajax request to server to change LED state


                $('#flip-1').change(function() {
                    $.getJSON('/_led', {state: $('#flip-1').val()});
                });     


                // periodically (500ms) do an ajax request to get the button state
                // modify the span tag to reflect the state (pressed or not)
                // the state text comes from the JSON string returned by the server
                function button(){
                    var data = ajax_button('/_button');

                    // New line to update button state; and refresh the jQuery mobile slider widget
                    $('#flip-1').val(data.buttonState).slider('refresh');

                    $("#buttonState").text(data.buttonState);
                }

                button(); // Update state on page load
                setInterval(button,500); // And then update every 0.5 seconds after that
            });
        </script>
    </head>

    <body>
        <!-- Simple JQuery Mobile page that display the button state on the breadoard -->
        <!-- You can also change the LED state with the slider switch -->
        <!-- The Raspberry Pi uptime is displayed in the footer (Jinja2 expands the template tag) -->

        <div data-role="page" data-theme="b">
          <div data-role="header">
            <div><h3>Raspberry Pi Web Control</h3></div>
          </div>

          <div data-role="content">
            <form>
            <p>The system is <span id="buttonState"></span></p>
            <br>

            <!-- Changed these option values to match the values returned by Flask -->
            <select name="flip-1" id="flip-1" data-role="slider" style="float: left;">
                <option value="disarmed">Sys off - disarmed</option>
                <option value="armed">Sys on - armed</option>
            </select>
            </form>
          </div>
         <div data-role="footer">
            <div><h4>This Raspberry Pi has been {{uptime}}</h4></div>
          </div>
        </div>
    </body>

</html>

<style>
h3, h4 {text-align: center;}
span {font-weight: bold;}
</style>

<script type=text/javascript>
    $(
    // When the LED button is pressed (change)
    // do an ajax request to server to change LED state
    function() 
    {
        $('#flip-1').change(function() 
        {
        $.getJSON('/_led', {state: $('#flip-1').val()});
        });     
    }
    );

    $(
    // periodically (500ms) do an ajax request to get the button state
    // modify the span tag to reflect the state (pressed or not)
    // the state text comes from the JSON string returned by the server
   function button() 
    {
    $.getJSON('/_button', function(data)
        {
            //Ben's line in order to change the slider's state
            $('#flip-1').val(data.buttonState);
            //The new line that makes the slider work depending on the state's value
            $('#flip-1').slider('refresh');
            $("#buttonState").text(data.buttonState);

            // New line to update button state

            setTimeout(function(){button();},500);
        });
    }
    );
</script>