Ajaxを使用してフラスコアプリでのような機能/機能を実装する方法 -- javascript フィールド と jquery フィールド と ajax フィールド と flask フィールド 関連 問題

How to implement a like/unlike functionality in flask app using AJAX












0
vote

問題

日本語

私はこれです答え

とそれはうまくいったが、唯一の問題は、ユーザが投稿が投稿されたときに再ロードされ、そして ページ全体をリロードする必要なしにボタンを変更したいと思っていたら、jQuery Ajaxが必要です(私は前にJavaScriptを使用したことがない)ので、ここに試してみたものです:

アンカータグ(ボタン/様子とは異なり)を作成し、必要なデータをクリックしてAjax要求をクリックして、要求とデータベースを処理するフラスコルートに送信されます。だからここは投稿とアンカーを含むビューです:

<事前> <コード> {% block posts %} {% if not posts.items %} <div class="no-post"> <div class="no-posts"><h1>No Posts Availabe</h1></div> </div> {% else %} {% for post in posts.items %} <div class="dark-box"> <article class="media"> <img class="rounded-circle article-img" src="{{ url_for('static', filename='profile_pics/' + post.author.image_file) }}"> <!-- rounded-circe is bootstrap article-img css --> <div class="media-body"> <div class="article-metadata"> <a class="username-anchor" href="{{ url_for('users.user_profile', username=post.author.username) }}">{{ post.author.username }}</a> <small class="text-muted">{{ post.date_posted.strftime('%Y-%m-%d') }}</small> </div> <!-- strftime method to distplay %y-%m-%d (thats the format) --> <h2><a class="article-title" href="{{ url_for('posts.post', post_id=post.id) }}">{{ post.title }}</a></h2> <div class="article-content-border"> <p class="article-content">{{ post.content }}</p> </div> </div> </article> <div class="like-comment-div"> {% if current_user.has_liked_post(post) %} <a class="liked" data-post-id="{{ post.id }}" data-action="like">Unlike</a> {% else %} <a class="not-like" data-post-id="{{ post.id }}" data-action="like">Like</a> {% endif %} <a class="comment-anchor">comment</a> </div> </div> {% endfor %} {% endblock content %}

とここにJavaScript:

<事前> <コード> $(".like-comment-div > a").click(function(e) { e.preventDefault(); let action = $(".like-comment-div > a").data("action"); let post_id = $(".like-comment-div > a").data("post-id"); $.ajax({ type: "GET", url: "/like", data: { action: action, post_id: post_id }, success: function(data){ alert(data['status']) }, error: function(){ alert('error') } }); });

そしてここでフラスコの経路は次のとおりです:

<事前> <コード> @posts.route('/like', methods=['GET']) def like_action(): if current_user.is_authenticated: if request.args['action'] == 'like': post = Post.query.filter_by(id=request.args['post_id']).first_or_404() if current_user.has_liked_post(post): current_user.unlike_post(post) db.session.commit() return jsonify({"status": "unliked"}) else: current_user.like_post(post) db.session.commit() return jsonify({"status": "liked"})

問題:

POST NUMBER 1を言ってみましょう.1枚目のポスト番号1を押すと、「好き」と表示されます。私は「まあまあ」を警告し、ナンバーポスト番号1 そして、ページを更新すると、「好き」ボタンがポスト番号1に表示されます。

誰かがここで何を見逃したのかを指摘してください。

事前にありがとうございました。

英語

I followed this answer

and it worked fine but the only problem is when a user likes a post the page gets reloaded and i have read that if i wanted the button to change without the need to reload the entire page then jquery AJAX is needed (i have never used javascript before) so here is what i tried:

i have created an anchor tag(the like/unlike button) and on click an AJAX request with the data needed(like or unlike and post id) is sent to my flask route that will handle the request and database.

so here is the view that contains the posts and the anchors:

{% block posts %}     {% if not posts.items %}     <div class="no-post">         <div class="no-posts"><h1>No Posts Availabe</h1></div>     </div>     {% else %}         {% for post in posts.items %}           <div class="dark-box">             <article class="media">                 <img class="rounded-circle article-img" src="{{ url_for('static', filename='profile_pics/' + post.author.image_file) }}">                 <!-- rounded-circe is bootstrap article-img css -->                 <div class="media-body">                      <div class="article-metadata">                     <a class="username-anchor" href="{{ url_for('users.user_profile', username=post.author.username) }}">{{ post.author.username }}</a>                     <small class="text-muted">{{ post.date_posted.strftime('%Y-%m-%d') }}</small>                     </div> <!-- strftime method to distplay %y-%m-%d (thats the format) -->                     <h2><a class="article-title" href="{{ url_for('posts.post', post_id=post.id) }}">{{ post.title }}</a></h2>                     <div class="article-content-border">                         <p class="article-content">{{ post.content }}</p>                     </div>                 </div>             </article>             <div class="like-comment-div">                 {% if current_user.has_liked_post(post) %}                     <a class="liked" data-post-id="{{ post.id }}" data-action="like">Unlike</a>                 {% else %}                     <a class="not-like" data-post-id="{{ post.id }}" data-action="like">Like</a>                                     {% endif %}                     <a class="comment-anchor">comment</a>             </div>           </div>         {% endfor %}        {% endblock content %} 

and here is the javascript:

$(".like-comment-div > a").click(function(e) { e.preventDefault();    let action = $(".like-comment-div > a").data("action"); let post_id = $(".like-comment-div > a").data("post-id");  $.ajax({     type: "GET",     url: "/like",     data: {         action: action,         post_id: post_id     },     success: function(data){         alert(data['status'])     },     error: function(){         alert('error')     } }); }); 

and here is the flask route:

@posts.route('/like', methods=['GET']) def like_action(): if current_user.is_authenticated:     if request.args['action'] == 'like':         post = Post.query.filter_by(id=request.args['post_id']).first_or_404()         if current_user.has_liked_post(post):             current_user.unlike_post(post)             db.session.commit()             return jsonify({"status": "unliked"})         else:             current_user.like_post(post)             db.session.commit()             return jsonify({"status": "liked"}) 

the problem:

when i press the like button of let's say post number 1 i get alerted with 'liked' as expected and when i reload the page the 'Unlike' shows but when i press the like button of post number 2 or any other post i get alerted with 'unliked' and unlikes post number 1 and when i refresh the page the 'Like' button shows on post number 1.

could someone please point out what did i miss here?

Thanks in advance.

</div
           

回答リスト


関連する質問

2  SqlalChemyエラーをもっとユーザーフレンドリーで詳細にする  ( Make sqlalchemy errors more user friendly and detailed ) 
私はこのようなモデルを持っています: <事前> <コード> class Company(db.Model): __tablename__ = "my_table" id = db.Column(db.Integer(), primary_key...

31  Render_Templateとリダイレクトの違いは?  ( Difference between render template and redirect ) 
<事前> <コード> return redirect(url_for('index', var=var)) return render_template('index.html', var=var) は、本質的に同じものですか? 2つの関数の違いは何です...

105  グローバル変数はフラスコでスレッドセーフですか?リクエスト間でデータを共有するにはどうすればよいですか?  ( Are global variables thread safe in flask how do i share data between requests ) 
私のアプリケーションでは、要求を行うことによって共通のオブジェクトの状態が変わり、応答は状態によって異なります。 <事前> <コード> class SomeObj(): def __init__(self, param): self.p...

0  Flask HTMLからPythonへの値を取得します  ( Get the value from flask html to python ) 
HTMLコードの下に与えられたPythonを使用してフラスコサーバを作成しました。私はここにいます CheckBoxSelectComboのみを取得し、Flask UIのチェックボックスを選択した後、私はどんなフラスコ」ボタンをクリックしてPythonでそれ...

6  フラスコ用途は液滴にさらされることはできません  ( Flask application cannot be exposed on droplet ) 
デジタルオーシャンドロップレットにフラスコサーバを展開しています。 <事前> <コード> from flask import Flask app = Flask(__name__) @app.route("/a/<string:b>") def deplo...

61  SQLalChemyを使用して使用中のPython / Flask Serverでは、「MySQLサーバーが消えている」を回避する  ( Avoiding mysql server has gone away on infrequently used python flask server ) 
フラスコ/ SQLAlchemyが存在しない場合は新しいデータベース接続を作成するように設定することができますか? SQLalchemyを使用する頻度に訪問したPython / Flaskサーバーを持っています。それは数日ごとに訪問され、最初の訪問では、それ...

5  Flask Celery Update_Stateが他の機能の内側から  ( Flask celery update state from inside another function ) 
他の関数から私のセロリタスクの状態を更新したいのですが。これが私が今持っているものです: 経路 <事前> <コード> @app.route('/my-long-function', methods=['POST']) def my_long_function(...

0  WTF-PeeweeのSelectModelfieldに選択を制限することは可能ですか  ( Is it possible to limit choices in selectmodelfield in wtf peewee ) 
フラスコ - おしっことwtfpeeweeでフラスコを使用します。 だから、私はそのようなモデルを持っています: <事前> <コード> class Category(Model): name = CharField() user = Forei...

11  フラスコを設定できません。 Windowsで環境変数を設定する方法  ( Cannot setup flask how to setup environment variable in windows ) 
私はフラスコを学んで始めました、そして私はフラスコのセットアップに立ち往生しています。環境変数を設定する方法がわかりません。 Flask Runコマンドを使用するたびに、次の点に遭遇します。私はWindowsで環境変数を設定するために多くのGoogle検索を行...

0  Webページでジョブキューワーカータスクを同期的に表示します  ( Display job queue worker tasks synchronously in webpage ) 
RQ労働者では、インターネットからファイルをダウンロードするために非同期タスクがあり、Webページの進行状況を監視し、インターネットを検索し、進捗状況やタスクの状態を同期的に表示する方法を見つけることができません。 MySQLの状態、MySQLのUpdate...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有