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

Question

我希望得到这个similar question的答案：

我有一个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页面：

Answer 1

试试这个，

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

    });

Answer 2

事实证明我实际上并不需要使用jQuery，而是我可以使用带有隐藏字段的html表单提交JSON（如this问题中所示）：

<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;

        }