Question

在单击“保存”或“搜索”按钮后，我尝试通过request.form从Flask中的按钮接收名称和值。我从选择和选项中获得元组，但没有按钮。我想知道我做错了什么吗？

signup.html：

<form class="form-signin" action="" method="post">
  <div class="form-group">
    <label for="exampleFormControlSelect1">Choose</label>
    <select class="form-control" id="exampleFormControlSelect1" name="select">
      <option value="o1">o1</option>
      <option value="o2">o2</option>
      <option value="o3">o3</option>
    </select>
    <label type="button" id="search" name="search" value="Search" class="btn btn-lg btn-primary btn-block">Search</label>
    <label type="button" id="save" name="save" value="Save" class="btn btn-lg btn-primary btn-block">Save</label>
  </div>
</form>

Python代码：

from flask import Flask, render_template, request
import json
from my_func import my_func

app = Flask(__name__)


@app.route('/')
@app.route('/', methods=['POST'])
def signUpUser():
    if request.method == 'POST':
        print(request.form)
        select = request.form['select']  
        dict_to_json = {'status': 'OK', 'select': select}
        if select == "my_func":
            result = my_func('my_input')
            dict_to_json['my_func'] = result
        return json.dumps(dict_to_json)
     return render_template('signup.html')


if __name__ == "__main__":
    app.run(debug=True)
    app.run()

Javascript：

$(function () {
    $('#search').click(function () {
        $.ajax({
            url: '/',
            data: $('form').serialize(),
            type: 'POST',
            success: function (response) {
                console.log('success')
            }
        });
    });
});

由此我收到： ImmutableMultiDict([('select', 'o1')]) 但我期望： ImmutableMultiDict([('select', 'o1'),('search','Search')])

Answer 1

post方法将仅向您发送输入字段（input，textarea，select，单选按钮等）。

因此，要执行所需的操作，必须将label元素转换为input元素，并使它的行为类似于“提交”按钮。

您可以这样做：

<form class="form-signin" action="" method="post">
  <div class="form-group">
    <label for="exampleFormControlSelect1">Choose</label>
    <select class="form-control" id="exampleFormControlSelect1" name="select">
      <option value="o1">o1</option>
      <option value="o2">o2</option>
      <option value="o3">o3</option>
    </select>
    <input type="submit" id="search" name="action" value="Search" class="btn btn-lg btn-primary btn-block"/>
    <input type="submit" id="save" name="action" value="Save" class="btn btn-lg btn-primary btn-block"/>
  </div>
</form>

由于您具有相同的名称，因此可以像response.form['action']或"Search"或"Save"那样访问信息。

按照您所说的解决：

HTML：

<form class="form-signin" action="" method="post">
  <div class="form-group">
    <label for="exampleFormControlSelect1">Choose</label>
    <select class="form-control" id="exampleFormControlSelect1" name="select">
      <option value="o1">o1</option>
      <option value="o2">o2</option>
      <option value="o3">o3</option>
    </select>
    <input type="button" id="search" name="action" value="Search" class="btn btn-lg btn-primary btn-block"/>
    <input type="button" id="save" name="action" value="Save" class="btn btn-lg btn-primary btn-block"/>
  </div>
</form>

JavaScript：

$(function () {
    $('[name="action"]').click(function () {
        $.ajax({
            url: '/',
            data: $('form').serialize(),
            type: 'POST',
            success: function (response) {
                $("where you want to insert").html(response)
            }
        });
    });
});

如何在Flask中接收按钮的名称和值属性

1 个答案: