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.

• Hamendra Sunthwal: First open this link in new tab - 127.0.0.1/magento/AdminSample/Datasave/index & check if you see anything or it gets to 404.
• Hamendra Sunthwal: Visit 127.0.0.1/magento/AdminSample/Datasave in your browser & check.
• Prits: 127.0.0.1/reg-dealers/AdminSample/datasave/index and 127.0.0.1/reg-dealers/AdminSample/Datasave/index this link goes to 404 and Datasave or datasave means D is in small letter both link goes to 404 will you please help @HamendraSunthwal
• Hamendra Sunthwal: I have added answer modify file as per answer i posted to this question & check.

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

• Hamendra Sunthwal: run di:compile & clear cache after file modification
• Hamendra Sunthwal: Let me know if it works.
• Prits: Yes it works and shows the result but a question if i want to run ajax on admin side then these files are not in adminhtml folder these are work on admin side as well ?@Hamendra
• Hamendra Sunthwal: Let me update answer
• Hamendra Sunthwal: Answer updated now it will work for adminhtml, just move your controller code into this controller & change folder name as per your requirement.