如何从ajax POST表单提交使用Flask的render_template

camdenl 发表于 Dev

卡姆登尔

我希望得到这个类似问题的答案：

我有一个jQuery表单，它将JSON数据发送到Flask提供的某个URL：

    <div id="form">      
      <form id="send">        
        <input type="submit" value="Continue" >
      </form>
    </div>



jQuery(document).on('ready', function() {
        jQuery('form#send').bind('submit', function(event){
        event.preventDefault();

        var form = this;
        json = geojson.write(vectors.features);

        $.ajax({
            type: "POST",
            contentType: 'application/json',
            url: $SCRIPT_ROOT + "/create",
            dataType: "json",
            success: function(){},
            data: json

        });
    });
});

在Flask方面，我有一个简单的函数，可呈现显示JSON对象的HTML页面：

@app.route('/create', methods=['POST'])
def create():
    content = request.json
    print content
    return render_template('string.html', string = content)

我知道正在传递JSON，因为我可以看到它在运行Flask服务器的控制台中打印：

控制台打印

问题是模板被呈现为Ajax请求的响应的一部分，但是我希望模板被呈现为新的html页面：

要求的回应

卡姆登尔

因此，事实证明，我实际上不需要为此使用jQuery，而是可以使用带有隐藏字段的html表单（如本问题所述）来提交JSON ：

<div id="form">

      <form id="send" method="post" action="create" onsubmit="getJSON()" enctype='application/json'>        
        <input type="submit" value="Continue" />
        <input type="hidden" name="jsonval" value=""/>
      </form>
</div>

然后在单击按钮时使用javascript填充表单：

function getJSON(){

            json = geojson.write(vectors.features);
            var formInfo = document.forms['send'];
            formInfo.jsonval.value = json;

        }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。