Why can't my ajax get request find my handler route when I add arguments?

Question

I am building a web app that displays data about flowers that is stored in my local server running bottle. My front end is html, js with ajax; My back end is python with bottle

In the browser there is an empty div in which the data is to be displayed. Below it there is a row of images. When the user clicks on an image the data should display in the div above.

I tried using $.ajax instead of $.get, and I'm getting the same result.

This is my event listener in js:

$('.image').click((e)=>{
  $('.selected').removeClass('selected');
  $(e.target).addClass('selected'); // just a visual indication

  $.get('/flowerdesc/'+$(e.target).attr('id')).done((data)=>{
    flowerInfo = JSON.parse(data);
    $('#flower-title').empty();
    $('#flower-title').html(flowerInfo.name);
    $('.desc-text').empty();
    $('.desc-text').html(flowerInfo.description);
  })
})

This is my handler for this request:

@get('/flowerdesc/<flower>')
def get_flower_desc(flower):
  return json.dumps(data[data.index(filter(lambda f: f.name == flower, data)[0])])

(data is an array of dictionaries, each containing data of a single flower)

I am getting a 404 error (the function get_flower_desc is not executed at all) that possibly is happening because of the argument, because whenever I use aa function with no parameters and pass in no arguments I am getting the result that I'm expecting.

Answer 1

I found that I had to formulate an AJAX request quite precisely to get it to work well with Bottle in a similar scenario.

Here is an example with a GET request. You could attach this function to the event handler or move it directly to the event handler.

function getFlowerData(id) {
  $.ajax({
    type: "GET",
    cache: false,
    url: "/flowerdesc/" + id,
    dataType: "json", // This is the expected return type of the data from Bottle
    success: function(data, status, xhr) {
  $('#flower-title').html(data['name']);
  $('.desc-text').html(data['description']);
    },
    error: function(xhr, status, error) {
      alert(error);
    }
  });
};

However, I found better results using a POST request from AJAX instead.

function getFlowerData(id) {
  $.ajax({
    type: "POST",
    cache: false,
    url: "/flowerdesc",
    data: JSON.stringify({
        "id": id,
        }),
    contentType: "application/json",
    dataType: "json",
    success: function(data, status, xhr){
      $('#flower-title').html(data['name']);
      $('.desc-text').html(data['description']);
    },
    error: function(xhr, status, error) {
      alert(error);
    }
  });
};

For the POST request, the backend in Bottle should look like this.

@post("/flowerdesc") # Note URL component not needed as it is a POST request
def getFlowerData():
    id = request.json["id"]
    # You database code using id variable
    return your_data # JSON

Make sure your data is valid JSON and that the database code you have is working correctly.

These solutions using AJAX with Bottle worked well for me.