Magento 2 Ajax Admin

Question

Hi there I'm trying to run a custom module when a product is saved at the moment I have an event listener on the product page and need to send some of the info entered to a controller using ajax.

When making the Ajax call the result is coming back with the current pages HTML on the console. Here is my code any help would be awesome thanks :)

RelatedProducts/Items/view/adminhtml/templates/js.phtml

            function ajax(){
                var name = document.getElementsByName("product[name]")[0].value;
                var type = document.getElementsByName("product[product_category_type]")[0].value;

                $.ajax({
                    url: "RelatedProducts_Items/Adminhtml/CustomAjax", 
                    data: { name : name, type : type},
                    type: "POST",
                    success: function(result){
                        console.log(result);
                    } 
                });
            }

RelatedProducts/Items/etc/adminhtml/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="RelatedProducts" frontName="RelatedProducts">
            <module name="RelatedProducts_Items"/>
        </route>
    </router>
</config>

RelatedProducts/Items/Controller/Adminhtml/CustomAjax.php

namespace RelatedProducts\Items\Controller\Adminhtml;

class CustomAjax extends \Magento\Backend\App\Action


    public function execute()
    {

       echo "testing";
    }
}

Answer 1

Follow This Step

app/code/Relatedproducts/Items/etc/adminhtml/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 frontName="relatedproducts_items" id="relatedproducts_items">
            <module before="Magento_Backend" name="RelatedProducts_Items"/>
        </route>
    </router>
</config>

app/code/RelatedProducts/Items/view/adminhtml/templates/js.phtml

function ajax(){
    var name = document.getElementsByName("product[name]")[0].value;
    var type = document.getElementsByName("product[product_category_type]")[0].value;

    $.ajax({
        url: 'admin/relatedproducts_items/customajax',
        showLoader: true,
        data: {id:<?php echo $id ?>,p:pincode},
        type: "POST",
        success: function(result){
            console.log(result);
        }
    });
}

RelatedProducts/Items/Controller/Adminhtml/CustomAjax.php

<?php

namespace RelatedProducts\Items\Controller\Adminhtml;

class CustomAjax extends \Magento\Backend\App\Action
{
    protected $resultPageFactory;

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

    public function execute()
    {
        if($this->getRequest()->isAjax()){

            echo "Testing";
        }

        return false;
    }
}