flask如何使用jquery只用checkbox向后端传值

Question

<form>
    开启/关闭
        <div >
        <input type='checkbox' id= 'kaiguan'>
        <label for='jiami'>开启/关闭</label>
    </div>
模式    <select  id="mode" name="mode" >
                   <option>---请选模式---</option>
                   <option value="0">模式1</option>
                   <option value="1">模式2</option>
    </select>
<br>
选项1：    <select  id="1" name="1" >
                   <option>---请选择码率---</option>
                   <option value="1">1</option>
                   <option value="2">2</option>
                  <option value="3">3</option>
                   <option value="4">4</option>
                <option value="5">5</option>
                   <option value="6">6</option>

    </select>
<script>
    var PIN={};
        PIN.mode=$('#mode').val();
        PIN.1=$('#1').val();

   
        


</script>

    </form>

如何不使用button，直接在checkbox选中时会向后端发送一次select中mode和1的值，打印出来；取消选中时也会发送一次mode和1的值，打印

Answer 1

添加change事件用ajax发送数据就行，示例代码如下

demo.py

from flask import Flask, request,render_template
import json

app = Flask(__name__, static_url_path='')

#直接显示
@app.route('/')
def index():
    return render_template("demo.html")

@app.route("/api/login",methods=["get","post"])
def login():
    str1 = str(request.values.get("1"))
    mode = str(request.values.get("mode"))
    print(str1,mode)
    return str1+"\n"+mode
 
  
app.run('0.0.0.0', port=8001,debug=True)

templates/demo.html

<form>
    开启/关闭
    <div>
        <input type='checkbox' id='kaiguan'>
        <label for='jiami'>开启/关闭</label>
    </div>
    模式    <select id="mode" name="mode">
        <option>---请选模式---</option>
        <option value="0">模式1</option>
        <option value="1">模式2</option>
    </select>
    <br>
    选项1：    <select id="1" name="1">
        <option>---请选择码率---</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>

    </select>
    <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $('#kaiguan').change(function () {
            $.ajax({
                url: '网址',
                data: $(this.form).serialize(),
                complete: function (xhr) {
                    alert('服务器端返回内容\n'+xhr.responseText)
                }
            })

        })


    </script>

</form>