I cant display the result in my html because the request stays in state 1 and the response text displays undefined. When I access the url it displays the value I want to show on my html. Why is this happening? I'm using django on server side btw. Kinda new to ajax but I haven't been able to find an answer to this problem on other already solved questions.

Code that executes the request:

const getHighScore = (gameID, levelID) => {
  let ajaxPrueba = $.ajax({
    url: `/get-data/${gameID}/${levelID}`,
    type: 'get',
    success: function(data) {
        return data;
    },
    failure: function(data) { 
        console.log('Got an error dude');
    }
  });

  return ajaxPrueba;
}

The parameters i pass on are 1 for gameID and 1 for levelID The url i'm talking about

Also this is what the console returns:

ajaxPrueba = $.ajax({
    url: `/get-data/1/1`,
    type: 'get',
    success: function(data) {
        return data;…
Object { readyState: 1, getResponseHeader: getResponseHeader(e), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(e, t), overrideMimeType: overrideMimeType(e), statusCode: statusCode(e), abort: abort(e), state: state(), always: always(), catch: catch(e)
, … }
​
abort: function abort(e)​
always: function always()​
catch: function catch(e)​
done: function add()​
fail: function add()​
getAllResponseHeaders: function getAllResponseHeaders()​
getResponseHeader: function getResponseHeader(e)​
overrideMimeType: function overrideMimeType(e)​
pipe: function pipe()​
progress: function add()​
promise: function promise(e)
​
readyState: 4
​
responseText: "22"
​
setRequestHeader: function setRequestHeader(e, t)​
state: function state()
​
status: 200
​
statusCode: function statusCode(e)
​
statusText: "OK"
​
then: function then(t, n, r)​
<prototype>: Object { … }

ajaxPrueba.readyState
4