首页 > ajax的post之后如何强制重新渲染页面

ajax的post之后如何强制重新渲染页面

正在写一个web收藏的功能,用到了bootstrap的模拟层和ajax交互。用户可以选择文件夹进行收藏或自己新建一个。对于已建好的文件夹,直接点击文件名就收藏,后端设置了路由刷新页面无问题。然而新建文件夹后马上将当页的文章加入新建的收藏夹就出问题了,无法刷新页面。

            $('#create-collection-submit').on('click',(function(){
                $('#collections-intial-view').css('display', "block");
                $('#create-new-collection').css('display', 'none');  
                $.post($SCRIPT_ROOT +'/_create_collection/',
                    {'new_collection_name':$("div#create-new-collection input").val(), "post_id":(window.location.href).slice(27,-1)},function(feedback){
                        // $("p#feedback").html(feedback['flash']);
                    }
                )
            }))

这是javascript部分的,分别用了两个路由一个新建文件夹一个将文章加入文件夹,然而新建后最多控制到bootstrap modal消失但页面无法刷新。我试过window.location.reload()等等方法都是一闪而过。得人工按F5才会看到按钮的样式改变说明收藏成功了。

前端我用了jinja2模板,而且做了条件选择,收藏与否会渲染不同的html代码,我不清楚这是否会有影响。但要是在路由写跳回首页等等就会刷新页面。

html的代码:

 <div class="modal-body">
     <div id="collections-intial-view">
        {% if not current_user.collections.all() %}
            <a id="create-collection">创建第一个收纳盒</a>
        {% else %}
            <p id="feedback"></p>
            请选择保存文章的收纳盒
            {% for collection in current_user.collections.all() %}
            <a href="{{ url_for('main.add_into_collection',post_id=post.id, coll_id=collection.id) }}">{{ collection.collection_name }}</a>
            {% endfor %}
            <a id="create-collection">你也可以新建一个收纳盒</a>
        {% endif %}
    </div>
    <div id="create-new-collection" style="display:none;">
        <input type="text" name="new_collection_name" class="form-control" placeholder="请输入新收纳盒的名称" />
        <a id="create-collection-submit">确认</a>
        <a id="create-collection-cancel">取消</a>
    </div>
 </div>

后端路由可能用不上,也贴上吧:

# Add post into collection
@main.route('/add_into_colletion/<int:coll_id>/<int:post_id>')
@login_required
def add_into_collection(coll_id, post_id):
    post = Post.query.get_or_404(post_id)
    if post in current_user.like_posts.all():
        flash('你已经收藏了该文章')
        return redirect(url_for('main.post', id=post.id))
    collection = Collection.query.get_or_404(coll_id)
    collection.posts_sort.append(post)
    current_user.like_posts.append(post)
    db.session.add(current_user)
    db.session.add(collection)
    flash('你已收纳了该文章')
    return redirect(url_for('main.post', id=post.id))

# Create collection and return message with json
@main.route('/_create_collection/', methods=['POST', 'GET'])
@login_required
def create_collection():
    new_collection_name = request.values.get('new_collection_name', None)
    post_id = request.values.get('post_id', None)
    if len(new_collection_name) < 2:
        return jsonify({'flash':'收纳盒的名称至少由两个字符组成'})
    if new_collection_name in [ item.collection_name for item in current_user.collections.all() ]:
        return jsonify({'flash':'收纳盒已存在'})
    else:
        new_collection = Collection(owner=current_user._get_current_object(),
                                    collection_name = new_collection_name)
        db.session.add(new_collection)
        db.session.commit()
        coll_id = new_collection.id
        return redirect(url_for('main.add_into_collection', coll_id=coll_id, post_id=post_id))
    return redirect(url_for('main.post', id=post_id))

我用了两张表,一张关系表是用户喜爱的所有文章,另外一张是用户的收藏夹,再建立关系表到文章的表。

我猜应该是ajax的问题,我也尝试用了on也是于事无补,求教,谢谢!


这问题不是很容易定位吗,改变样式就两行代码,然后这两行代码不是post回调成功才运行,那就是跟post和flask无关。

【热门文章】
【热门文章】