How to insert/update data in custom table using Magento 2 using Ajax but 404 error occur on ajax hit?

Question

I have created a custom module for admin area in which i have show some data in phtml file. I have created a custom table in database using installschema.php.

Now i want to save that data in database but on hitting the update button ajax url is hit but the response it gives me 404.

My file path are

My URL is http://127.0.0.1/magento/AdminSample/datasave/index/?isAjax=true

My controller file path is ( app/code/Tym17/AdminSample/Controller/Adminhtml/Datasave/Index.php )

<?php
namespace Tym17\AdminSample\Controller\Adminhtml\Datasave;

use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
use Magento\Framework\App\Config\ScopeConfigInterface; // Needed to retrieve config values

class Index extends \Magento\Backend\App\Action
{
/**
 * @var PageFactory
 */
 protected $resultPageFactory;
/**
 * @var scopeConfig
 * Needed to retrieve config values
 */
protected $scopeConfig;

/**
 * @param Context $context
 * @param PageFactory $resultPageFactory
 */
public function __construct(
    Context $context,
    PageFactory $resultPageFactory,
    ScopeConfigInterface $scopeConfig // Needed to retrieve config values
) {
    parent::__construct($context);
    $this->resultPageFactory = $resultPageFactory;
    $this->scopeConfig = $scopeConfig; // Needed to retrieve config values
}

/**
* Index Action*
* @return void
*/
public function execute()
{
    /*$post = (array) $this->getRequest()->getPost();
    var_dump($post);*/
    die('a');
}
}

My JS file path is ( app/code/Tym17/AdminSample/view/adminhtml/web/js/adminscript.js )

My routes.xml file path ( app/code/Tym17/AdminSample/etc/adminhtml/routes.xml )

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
<router id="admin">
    <route id="AdminSample" frontName="AdminSample">
        <module name="Tym17_AdminSample" before="Magento_Adminhtml" />
    </route>
</router>
</config>

My JS file is ( app/code/Tym17/AdminSample/view/adminhtml/web/js/adminscript.js )

require(["jquery","mage/url"],function($,url) {
$(document).ready(function() {
    console.log('123');
    url.setBaseUrl(BASE_URL);
    var BaseUrl = url.build('');
    jQuery( ".product" ).on( 'click', '.save',function() {
        console.log('click');
        let customurl = "http://127.0.0.1/magento/AdminSample/Datasave/index/";
        let dataid = jQuery(this).parent().parent().find('.dataid').text();
        $.ajax({
            url: customurl,
            type: 'POST',
            dataType: 'json',
            data: {
                dataid:dataid
            },
            complete: function(response) {             
                console.log('aaaaa');
            },
        });
    });
});
});

My controller file path ( app/code/Tym17/AdminSample/Controller/Adminhtml/Post/Index.php )

<?php
namespace Tym17\AdminSample\Controller\Adminhtml\Post;

class Index extends \Magento\Backend\App\Action
{
protected $resultPageFactory = false;

public function __construct(
    \Magento\Backend\App\Action\Context $context,
    \Magento\Framework\View\Result\PageFactory $resultPageFactory
)
{
    parent::__construct($context);
    $this->resultPageFactory = $resultPageFactory;
}

public function execute()
{
    echo'controller check'; die('aaahahahah123');
    $resultPage = $this->resultPageFactory->create();
    $resultPage->getConfig()->getTitle()->prepend((__('Posts')));

    return $resultPage;
}
}

if anything else needed i will add that any help is appreciated.

Answer 1

Modify files as per below answer & then use the controller url in ajax url.

Step 1- app/code/Tym17/AdminSample/etc/frontend/routes.xml

    <?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
<route id="adminsample" frontName="adminsample">
            <module name="Tym17_AdminSample"/>
        </route>
        </router>
    </config>

Step 2: Create controller file File: app/code/Tym17/AdminSample/Controller/Adminhtml/Post/Index.php

   <?php
    namespace Tym17\AdminSample\Controller\Adminhtml\Post;
    
    class Index extends \Magento\Backend\App\Action
{
    protected $resultPageFactory = false;

    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    )
    {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }

    public function execute()
    {
        echo'controller check'; exit;
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->prepend((__('Posts')));

        return $resultPage;
    }
}

Step 3 - Check controller

Browse this link 127.0.0.1/magento/adminsample/post/index