Can't send data using AJAX

JavaScript
4

What is:

$(flavour).val()

Clicking the link with your initial script sends the following request:

http://localhost/filter/?search=undefined&flavour=Berry

I changed your script like so:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ajax test</title>
  </head>
  <body>
    <a href="#" data-flavour="Berry" class="nav_link Berry">Berry</a>

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
      $('.nav_link').on('click', function(event){
        event.preventDefault();
        var flavour = $(this).data('flavour');
        $.get(
          '/filter/?search=' + flavour,
          {
            flavour: flavour
          }
        )
        .done(function(data){
          console.log(data);
        });
      });
    </script>
  </body>
</html>

And now when I click the link a request is fired to:

http://localhost/filter/?search=Berry&flavour=Berry

Which I presume is correct.