AJAX继续调用相同页面的URL而不是API URL

Question

I'm using Symfony version 3.* and I am using tetranz/select2entity-bundle to have Select2 to select assets to be assigned to users.

For some reason, AJAX keeps on calling the same page URL when trying to get the JSON output from an API URL.

URL should be:

http://127.0.0.1:8000/asset/api/asset_list

But the URL used is:

http://127.0.0.1:8000/user/1?field_name=assets

/**
 * Lists all asset entities.
 *
 * @Route("/api/asset_list", name="api_asset_list")
 * @Method({"GET", "POST"})
 */
public function apiAssetListAction()
{
    $em = $this->getDoctrine()->getManager();
    $assets = $em->getRepository('AppBundle:Asset')->findAll();

    foreach($assets as $asset)
            $itemArray[] = array('id' => $asset->getId(),'text' => $asset->__toString(),);

    return new Response(json_encode($itemArray), 200, array('Content-Type' => 'application/json'));
}



$builder->add('assets', Select2EntityType::class, [
                    'multiple' => true,
                    'remote_route' => 'api_asset_list',
                    'class' => 'AppBundle::Asset',
                    // 'primary_key' => 'id',
                    'text_property' => 'code',
                    'minimum_input_length' => 2,
                    'page_limit' => 10,
                    'allow_clear' => true,
                    'delay' => 250,
                    'cache' => true,
                    'cache_timeout' => 60000, // if 'cache' is true
                    'language' => 'en',
                    'placeholder' => 'Select assigned assets',
                    // 'object_manager' => $objectManager, // inject a custom object / entity manager 
                ]);

My Twig Code is as simple as this since I am using the Form Builder of Symfony to do the work for me:

 <div class = "modal" id = "assignModal" tabindex="-1" role = "dialog">
    <div class = "modal-dialog" role = "document">
        <div class = "modal-content">
            <div class = "modal-header">
                <h5 class = "modal-title">Assign Assets</h5>
            </div>
            <div class = "modal-body">
                {{form_start(assign_form)}}
                {{form_widget(assign_form)}}
                <input class = "btn btn-block btn-success" type="submit" value="Assign" />
                {{form_end(assign_form)}}
            </div>
        </div>
    </div>
</div> 

I also included this template in in my twig:form_themes configuration:

TetranzSelect2EntityBundle:Form:fields.html.twig

My list of JS Scripts used:

<script src="/js/jQuery.js"></script>
<script src="/js/jquery.collection.js"></script>
<script src="/js/popper.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/datatables.js"></script>
<script src="/js/list.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="/js/main.js"></script>
<script src="/js/select2.js"></script>
<script src="/bundles/tetranzselect2entity/js/select2entity.js"></script>

I hope you guys can help.