Magento 2: Ajax without effect

Question

My problem is as follow, my script except ajax in working (no problem with giving value or console.log) but my ajax doesn't give me the result expected (remove hidden class and fill a drop list with an array in the controller), it just does ... well ... nothing.
Below my code :

app/code/Vendor/ZipCode/view/frontend/web/js/ajax.js

define([
 'jquery',
 'underscore',
 'mage/template',
 'mage/url'
 //'jquery/list-filter'
], function (
 ,ドル
 _,
 template,
 url
) {
 'use strict';
 $(document).ready(function() {
 var ajaxurl = url.build('zipcode/Controller/Zipcode');
 var param = 'ajax=1';
 $('#zip_btn').val("not clicked");
 $('#zip_btn').on('click', function () {
 console.log("Test click"); 
 $('#zip_btn').val("clicked");
 $.ajax({
 showLoader: true,
 url: ajaxurl,
 data: param,
 type: "POST",
 dataType: 'json'
 }).done(function (data) {
 $('#test').removeClass('hideme');
 var html = template('#test', {posts: data});
 $('#test').html(html);
 });
 });
 });
});

app/code/Vendor/ZipCode/Controller/Zipcode/Index.php

<?php 
namespace Vendor\ZipCode\Controller\Zipcode;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
class Index extends Action
{
 public function __construct(
 Context $context,
 \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory
 ) {
 $this->resultJsonFactory = $resultJsonFactory;
 parent::__construct($context);
 }
 public function execute()
 {
 $result = $this->resultJsonFactory->create();
 if ($this->getRequest()->isAjax()) 
 {
 $test=Array
 (
 'Firstname' => 'What is your firstname',
 'Email' => 'What is your emailId',
 'Lastname' => 'What is your lastname',
 'ZipCode' => 'Your Zip Code'
 );
 return $result->setData($test);
 }
 }
} 

app/code/Vendor/ZipCode/view/frontend/templates/ziptemplate.phtml

<input type='button' id='zip_btn' name='zip_btn'>
<style> 
.hideme{display:none;}
</style>
<script type="text/x-magento-init">
 {
 "*": {
 "Vendor_ZipCode/js/ajax": {
 "AjaxUrl": "<?php echo $block->getAjaxUrl(); ?>"
 }
 }
 }
</script>
<div id='test' class="hideme">
 <select>
 <% _.each(posts, function(text,value) { %>
 <option value="<%= value %>"><%= text %></option>
 <% }) %> 
 </select>
</div>

app/code/Vendor/Zicode/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="standard">
 <route id="zipcode" frontName="zipcode">
 <module name="Vendor_ZipCode" />
 </route>
 </router>
</config>

My hypothesis is a problem with the url but I don't know what : I have 404 error for dev.mywebsite.com/zipcode/Controller/Zipcode in the network console.

I Don't know what is wrong in my code. if anybody has an idea they are welcome. PS: In case of minus please let me know in a comment so that I can improve the post.

Answer 1

I find the problem :

app/code/Vendor/ZipCode/viez/frontend/web/js/ajax.js

var ajaxurl = url.build('zipcode/zipcode');