Обработка запроса в Flask без обновления страницы

Пытаюсь реализовать механизм добавления фильмов в избранное, без перезагрузки страницы

HTML страница со слайдером, нужной кнопкой добавления и id фильма

  <div class="slider-block">
      <button type="button" id="moveLeft" class="btn-nav">
        ᐊ
      </button>
      <div class="slider" id="mySlider">
          {% for title, poster, details, popularity, genres, rating, id in movie_cards if not movie_cards.hidden %}
        <div class="film" id="movie0" title="{{title}}" onclick="recommendcard(this)">
          <img alt="{{details}} - poster" src={{poster}}>
          <div class="description">
            <div class="description__buttons-container">
              <div class="description__button">
                <a id="{{id}}" class="post">
                  <i class="fas fa-plus "></i>
                </a>
              </div>
            </div>
          </div>
        </div>
          {% endfor %}
      </div>
      <button type="button" id="moveRight" class="btn-nav">
        ᐅ
      </button>
    </div>

Файл js

 function addBinds() {
    $('.post').bind('click', function() {
      var val = $("#"+this.id).val();
      $.getJSON('/movie/'+$(this).attr('movie_id')+"/"+val,
          function(data) {
      });
    $("#mySlider").load('/ #movie_cards', function() {
       addBinds();
       addedToWatchlist(val);
     });

  return false;
  });
}
function addedToWatchlist(val) {
  var successMsg = "<div class='alert alert-success text-center'><strong>Film added to watchlist!</strong>&nbsp;-&nbsp;<a href='watchlist'>Click here to see your films</a></div>";
  var errorMsg = "<div class='alert alert-danger text-center'><strong>Error adding film to watchlist</strong></div>";
  if(val>0){
    // $('div.itemAdded').stop();
    $('div.top-success').fadeIn(500).delay(1500).fadeOut(500);
  }
  else{
    // $('div.itemAdded').stop();
    $('div.top-danger').fadeIn(500).delay(1500).fadeOut(500);
  }
}

HTML файл с избранными фильмами

    <div id="empty" class="hide-start">
      <h1 class="text-center"><strong>Your watchlist is currently empty</strong></h1>
      <h3 class="text-center"><a href="../">Click to add films</a><h3>
    </div>
    <div id="moviesBlock">

    <div class="slider-block">
    <button type="button" id="moveLeft" class="btn-nav">
      ᐊ
    </button>
    <div class="slider" id="mySlider">
        {% for title, poster, details, popularity, genres, rating, id in movie_cards if not movie_cards.hidden %}
      <div class="film" id="movie0" title="{{title}}" onclick="recommendcard(this)">
        <img alt="{{details}} - poster" src={{poster}}>
        <div class="description">
          <div class="description__buttons-container">
            <div class="description__button">
                <a id="{{id}}" class="post">
                  <i class="fas fa-plus "></i>
                </a>
            </div>
          </div>
        </div>
      </div>
        {% endfor %}
    </div>
    <button type="button" id="moveRight" class="btn-nav">
      ᐅ
    </button>
   </div>
  </div>

Js для страницы избранных фильмов

   $( document ).ready(function() {
      console.log( "ready!" );
      addBinds();
    });
    function addBinds() {
      if($('.film').length == 0)
      {
        $("#mySlider").hide();
        $("#empty").show();
      }
      else
      {
        $("#empty").hide();
        $("#mySlider").show();
      }
      $('.delete').bind('click', function() {
        $.getJSON('/delete/'+this.id,
            function(data) {
        });
      $("#moviesBlock").load('mySlider #film', function() {
         addBinds();
       });

    return false;
  });
}
function addedToCart(val) {
  var successMsg = "<div class='alert alert-success text-center'><strong>Item added to cart!</strong>&nbsp;-&nbsp;<a href='cart'>Click here to see your cart</a></div>";
  var errorMsg = "<div class='alert alert-danger text-center'><strong>Error adding item to cart</strong></div>";
  if(val>0){
    // $('div.itemAdded').stop();
    $('div.top-success').fadeIn(500).delay(1500).fadeOut(500);
  }
  else{
    // $('div.itemAdded').stop();
    $('div.top-danger').fadeIn(500).delay(1500).fadeOut(500);
  }

}

Route

    @main.route("/watch_list", methods=["GET"])
def watch_list():
    films = []
    try:
        user_id = int(current_user.get_id())
        films = Watchlist.query.filter_by(user_id=user_id).all()
        print(films)
        return films
    except:
        return "", 404
    return render_template('watchlist.html', watchlist=watchlist)


@main.route('/movie/<int:id>', methods=["DELETE"])
def delete(movie_id=None):
    try:
        db.session.delete(movie_id)
        db.session.commit()
    except:
        return "", 404
    return "", 200


@main.route('/movie/<int:movie_id>', methods=["POST"])
def post(movie_id=None):
    print(movie_id)
    # if current_user.is_authenticated():
    user_id = int(current_user.get_id())
    print(user_id)
    try:
        watch_list = Watchlist(movie_id=movie_id, user_id=user_id)
        db.session.add(movie_id, user_id)
        db.session.commit()
    except:
        return {"message": "This film is already added!"}, 409
    return "", 200

Model

class Watchlist(db.Model):

id = db.Column(db.Integer, primary_key=True)
movie_id = db.Column(db.Integer(), nullable=False)
user_id = db.Column(db.Integer(), db.ForeignKey('user.id'))