title: Flask - Update the page content without redirection in Ajax/JQuery
body: <p>I am developing a website that allows a user to follow tourist attractions. When a user clicks the follow button, the button will change to unfollow. The page is then refreshed due to redirection. But what I want is to make this page update but not reload. I got some relevant information from the Internet. The solution is to use Ajax or JQuery, but I still have no idea how to solve this problem. </p>
  
  <p><strong>View</strong></p>
  
  <pre><code>@main.route('/place/&lt;tourist_attraction_name&gt;')
  def place_detail(tourist_attraction_name):
      place = Place.query.filter_by(tourist_attraction_name=tourist_attraction_name.first()
      if place is None:
          abort(404)
      return render_template('main/detail/place_detail.html', place=place)
  
  
  @main.route('/follow/&lt;tourist_attraction_name&gt;', methods=['GET', 'POST'])
  @login_required
  def follow(tourist_attraction_name):
      place = Place.query.filter_by(tourist_attraction_name=tourist_attraction_name).first()
      if place is None:
          flash('Invalid place name.')
          return redirect(url_for('.index'))
      tourist_attraction_name=place.tourist_attraction_name)
      current_user.follow(place)
      flash('You are now following %s.' % tourist_attraction_name)
      return redirect(url_for('.place_detail', tourist_attraction_name=place.tourist_attraction_name)
  
  
  @main.route('/unfollow/&lt;tourist_attraction_name&gt;', methods=['GET', 'POST'])
      @login_required
      def follow(tourist_attraction_name):
          place = Place.query.filter_by(tourist_attraction_name=tourist_attraction_name).first()
          if place is None:
              flash('Invalid place name.')
              return redirect(url_for('.index'))
         tourist_attraction_name=place.tourist_attraction_name)
          current_user.unfollow(place)
          flash('You are now following %s.' % tourist_attraction_name)
          return redirect(url_for('.place_detail', tourist_attraction_name=place.tourist_attraction_name)
  </code></pre>
  
  <p><strong>place_detail.html</strong></p>
  
  <pre><code>&lt;h3&gt;{{ place.tourist_attraction_name }}&lt;/h3&gt;
        &lt;p&gt;{% if current_user.is_authenticated %}
              {% if not current_user.is_following(place) %}
                   &lt;a href="{{ url_for('.follow', tourist_attraction_name=tourist_attraction_name) }}"
                             class="btn btn-primary"&gt;Add&lt;/a&gt;
              {% else %}
                    &lt;a href="{{ url_for('.unfollow',tourist_attraction_name=tourist_attraction_name) }}"
                             class="btn btn-default"&gt;Remove&lt;/a&gt;
              {% endif %}
                    &lt;b&gt;&lt;font color="navy"&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Followers: &lt;/font&gt;&lt;/b&gt; &lt;span class="badge"&gt;{{ place.followers.count() }}&lt;/span&gt;
           {% endif %}&lt;/p&gt;
  </code></pre>
  
  <p>Additional issue:
  {%if condition%} only can be rendered once</p>
  
  <pre><code>&lt;h3&gt;{{ place.tourist_attraction_name }}&lt;/h3&gt;
        &lt;p&gt;{% if current_user.is_authenticated %}
              {% if not current_user.is_following(place) %}
                   &lt;button id="follow" onclick="ajax_follow('{{place.tourist_attraction_name}}')" class="btn btn-primary"&gt;
              {% else %}
                    &lt;button id="unfollow" onclick="ajax_unfollow('{{place.tourist_attraction_name}}')" class="btn btn-primary"&gt;
                             class="btn btn-default"&gt;Remove&lt;/a&gt;
              {% endif %}
                    &lt;b&gt;&lt;font color="navy"&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Followers: &lt;/font&gt;&lt;/b&gt; &lt;span class="badge"&gt;{{ place.followers.count() }}&lt;/span&gt;
           {% endif %}&lt;/p&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>&lt;button id="follow" onclick="ajax_follow('{{place.tourist_attraction_name}}')" class="btn btn-primary"&gt; &lt;script&gt;
      function ajax_follow(name) {
          $.ajax({
              url: "/follow/" + name, success: function (result) {
                  if (result == 'success') {
                      $("#follow").text("Remove");
                  }
              }
          });
      }
  
      function ajax_unfollow(name) {
          $.ajax({
              url: "/unfollow/" + name, success: function (result) {
                  if (result == 'success') {
                      $("#unfollow").text("Add");
                  }
              }
          });
      }
  &lt;/script&gt;
  </code></pre>