Question

我试图通过在jquery中分配值并在每次用户运行搜索时将其传递给后端来捕获复选框中的数据。它不适合我，尝试过几种方式。

用例：作为用户，我想搜索并能够检查各种搜索选项。

模板：

$('a#process_input').bind('click', function () {
                $.getJSON('/background_process', {
                    checkbox1: $('input[name="checkbox1"]').val(),
                    input_search: $('input[name="input_search"]').val(),
                },
                    function (data) {
                    ul.empty();
                    $.each(data.result, function (index, element) {
...
... <some irrelevant code...>

        <input type=text size=40 name=input_search>
        <a href=# id=process_input>
            <button class='btn btn-default'>Submit</button>
        </a>
    </form>
    <form method="POST" action="/">
        <p>Please select allergy options below:</p>
        <input type="checkbox"  name="checkbox1"/>Allergy 1

后端

    @app.route('/background_process', methods=['GET', 'POST'])

    def background_process():
try:
    checkbox1 = request.args.get("something")

    search_word = request.args.get('input_search', 0, type=str)

    if search_word:

        return jsonify(result=yummly_search(search_word, checkbox1))
    else:
        return jsonify(result='Try again.')
except Exception as e:
    return str(e)

Answer 1

我对getJSON函数不满意，但另一种方法是使用ajax。这是一个可运行的代码，我希望它有所帮助： HTML：

<input type=text size=40 name="input_search">
<a href=# id=process_input>
    <button class='btn btn-default'>Submit</button>
</a>

<p>Please select allergy options below:</p>
<input type="checkbox" name="checkbox1"/>Allergy 1

<div id="login_result"></div>

的javascript：

<script>
    $(document).ready(function () {
        $("#process_input").bind('click', function () {
            var login_result = $('#login_result');
            var input_search = $('[name="input_search"]').val();
            var checkbox1 = $('[name="checkbox1"]').is(":checked");
            console.log(input_search);
            console.log(checkbox1);
            var list = new FormData()
            list.append("input_search", input_search)
            list.append("checkbox1", checkbox1)
            var urlBackgroundProcess = "{{ url_for('background_process') }}";
            var ajaxRequest = $.ajax({
                type: "POST",
                url: urlBackgroundProcess,
                data: list,
                contentType: false,
                cache: false,
                processData: false,
                success: function (msg) {
                    login_result.html(msg.data);
                    console.log("AJAX ok 2!");
                }
            });

        });
    });
</script>

和烧瓶后端：

@app.route('/background_process',methods=['GET','POST'])
def background_process():
    msg=''
    if request.form.get("input_search"):
        msg=('I got that search pattern at the back end: \'%s\' \n the checkbox value is set to: \'%s\' ') \
            % (request.form.get("input_search"),request.form.get("checkbox1"))
    else:
        msg='I got the Ajax call but cannot read the data, try again! :('
    return jsonify(data=msg)

Jquery Flask捕获复选框值

1 个答案: