使用Typo3 ajaxselectlist扩展时Ajax调用出现404错误求助

Hey there! Sorry to hear you're stuck with a 404 error when using the ajaxselectlist extension in TYPO3. Let's walk through the most common causes and fixes based on the code you shared from ajaxselectlist/Resources/Templates/OptionRecord/List.html:

First, let's look at your existing JS code for context:

<script>
jQuery(document).ready(function ($) {
    var form = $('#ajaxselectlist-form');
    var selectForm = $('.ajaxFormOption');
    var controllerpath = $("#uri_hidden").val();
    var resultContainer = $('#ajaxCallResult');

    var service = {
        ajaxCall: function (data) {
            console.log("---->"+data.serialize());
            $.ajax({
                url: controllerpath,
                cache: false,
                data: {'uid':'1'},
                success: function (result) {
                    resultContainer.html(result).fadeIn('slow');
                },
                error: function (jqXHR, textStatus, errorThrow) {
                    resultContainer.html('Ajax request - ' + textStatus + ': ' + errorThrow).fadeIn('fast');
                }
            });
        }
    };

    form.submit(function (ev) {
        ev.preventDefault();
        service.ajaxCall($(this));
    });

    selectForm.change(function () {
        resultContainer.fadeOut('slow');
        form.submit();
    });

    selectForm.trigger('change');
});
</script>

Common Causes & Fixes #

• Check if controllerpath is a valid TYPO3 URI
  The 404 almost always comes from the controllerpath variable pointing to an invalid URL. Add a debug log right after you get the value to see what it's set to:

  var controllerpath = $("#uri_hidden").val();
  console.log("AJAX Target URL:", controllerpath); // Add this line
  

  Load the page, open your browser's dev tools (F12), go to the Console tab, and check what URL is printed. If it's empty, a relative path that doesn't resolve, or a path TYPO3 doesn't recognize, that's your problem.

• Generate the correct URI in the hidden field
  Make sure the #uri_hidden field is populated with a valid TYPO3 action URI using TYPO3's ViewHelpers. In your template, replace whatever is setting the value of this hidden field with something like:

  <input type="hidden" id="uri_hidden" value="<f:uri.action action='yourAjaxAction' controller='OptionRecord' extensionName='Ajaxselectlist' />" />
  

  Replace yourAjaxAction with the actual action method name in the extension's controller that handles the AJAX request. This ensures the URI is properly routed through TYPO3's system.

• Verify the controller action exists and is accessible
  Double-check that the extension's OptionRecordController (or whatever controller is supposed to handle the request) has the action method you're targeting. For example, if your URI points to yourAjaxAction, the controller should have:

  public function yourAjaxAction() {
      // Your AJAX logic here
      // Don't forget to disable the template/layout if needed:
      $this->view->setTemplateRootPaths([]);
      $this->view->setLayoutRootPaths([]);
      $this->view->setPartialRootPaths([]);
      return $this->view->render();
  }
  

  Also, ensure the action isn't restricted by TYPO3's access controls (if it's a frontend extension, make sure it's accessible to frontend users; if backend, check module permissions).

• Check TYPO3 routing configuration
  For TYPO3 v10+, extensions might use Routes.yaml to define routes. Make sure ajaxselectlist has a valid route configuration that maps your request to the correct controller action. If you're not sure, check the extension's documentation or its Configuration/Routes.yaml file.

Give these steps a try—start with debugging the controllerpath value, since that's the most likely culprit. Let me know if you need more details on any of these steps!

内容的提问来源于stack exchange，提问作者nigam mehta