Url in jQuery ajax call from javascript in different directory than file with endpoint [duplicate]

I have made a Python Flask application in which the directory structure uses different blueprints and a dedicated directory for several javascript modules (used within different html template files), essentially:

/app/main/routes.py
/app/main/templates/main/afile.html
/app/static/javascript/ascript.js

• within afile.html:

<script type="module" src="{{url_for('static', filename='javascript/ascript.js')}}"></script>

• within routes.py:

@bp.route("/ajax_func", methods=["GET", "POST"])
def ajax_func():
    return jsonify( {'data': 'hello'} )

• within ascript.js:

    $.ajax({
        url: "{{ url_for('main.ajax_func') }}",
        type: "POST",
        data: "whatever",
        success: function (data) { alert(data); }
    });

afile.html is a html template rendered from a different function within routes.py. Then I am trying to do a jQuery ajax call from ascript.js to the endpoint ajax_func within the main blueprint, but I am unable to get the right URL (always getting 404 html response).

How do I correctly specify the URL in the ajax call ?