如何在Ajax POST表单提交中使用Flask的render_template

Question

我希望能得到一个关于这个类似问题的答案：

我有一个使用jQuery的表单，它会把JSON数据发送到一个由Flask提供的特定网址：

    <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这边，我有一个简单的函数，它会渲染一个HTML页面来显示这个JSON对象：

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

我知道JSON数据确实被发送过来，因为我可以在运行Flask服务器的控制台中看到它被打印出来：

问题是，模板是作为Ajax请求的响应的一部分被渲染的，但我希望这个模板能作为一个新的HTML页面来渲染：

Answer 1

其实，@camdenl 的回答确实解决了这个问题，这意味着你必须使用表单来提交数据，而用 ajax 是无法实现重定向的。

使用表单，并设置 <input type="hidden" name="jsonval" value=""/> 这样它就不会在你的页面上显示出来。然后你可以在 JavaScript 中把 formInfo.jsonval.value 设置成你想要的值。

比如说

formInfo.jsonval.value = JSON.stringify(box_value);

然后在 app.py 中

@app.route('/generate', methods=['GET','POST'])
def generate():
    if request.method == 'POST':
        result = json.dumps(request.form)
        data = json.loads(result)['jsonval']

Answer 2

试试这个，

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

    });

Answer 3

结果发现，我其实不需要用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;

        }