使用Ajax将数据传递到烧瓶中

时间:2016-09-22 07:47:01

标签: javascript jquery python ajax flask

我正在尝试使用ajax使用post请求将一些数据从html传递给python。但请求的参数是空的。

一个简单的端点,我试图打印所有以请求形式出现的参数。

@app.route("/enter", methods=["POST", "GET"])
def enter_data():
    if request.method == "GET":
        return render_template('index.html')
    else:
        print("post")
        print(request.args)
        return render_template('index.html')

调试输出

post

ImmutableMultiDict([])
127.0.0.1 - - [22/Sep/2016 00:40:12] "POST /enter HTTP/1.1" 200 -

ajax功能如下

$(function() {
    $('.button').click(function() {
        var user = $('#userinput').val();
        console.log(user);
        $.ajax({
            url: '/enter',
            data: JSON.stringify( {'user': $('#userinput').val()} ),
            type: 'POST',
            success: on_request_success,
            error: on_request_error,
            })
        });
    });

该值在js控制台中打印。但它不存在于python方面。

html代码

<body>
        <h3>The Chef Bucket</h3>
        Enter food you like to order.
        <input type="text" name="user_data" id="userinput" />
        <input type="button" value="Submit" class="button">

        <div id="userinputdata"> 
            {% if not entered %}
                <h4></h4>
            {% else %}
                <h4>{{ entered }}</h4>
            {% endif %}
        </div>

    </body>

3 个答案:

答案 0 :(得分:0)

您的html代码中没有@Transactional (value = "txManagerDU", propagation = Propagation.REQUIRES_NEW) public void addOdValue (OdValuesEntity odValuesEntity) { odValuesDAO.addOdValue(odValuesEntity); } 标记,因此您的Committed transaction for test context [DefaultTestContext@222afc67 testClass = OdValuesServiceTest, testInstance= au.acap.app.JpaEntities.Service.OdValuesServiceTest@4c2fb9dd, testMethod = addOdValue@OdValuesServiceTest 无所事事。

答案 1 :(得分:0)

在渲染模板中,您需要指定要在模板中填充的元素。

而不是这个;

@app.route("/enter", methods=["POST", "GET"])
def enter_data():
    if request.method == "GET":
        return render_template('index.html')
    else:
        print("post")
        print(request.args)
        return render_template('index.html')

试试这个;

@app.route("/enter", methods=["POST", "GET"])
def enter_data():
    if request.method == "GET":
        return render_template('index.html')
    elif request.method == "POST":
        entered = request.form['entered']
        return render_template('index.html', entered=entered)
    else:
        return render_template('index.html')

答案 2 :(得分:0)

您的html代码中没有<form>标记。因此,ajax的data属性是请求为空。将您的<div>置于html中的<form>环境中,或者手动将data属性设置在ajax请求中:

$(function() {
    $('.button').click(function() {
        var user = $('#userinput').val();
        console.log(user);
        $.ajax({
            url: '/enter',
            data: JSON.stringify( {'user': $('#userinput').val()} ),
            type: 'POST',
            success: on_request_success,
            error: on_request_error,
            })
        });
    });

请注意,data属性在此处作为json对象发送,您必须在服务器端反序列化。如果你想保持简单,只需将其定义为一个dictinary。