按钮不执行ajax调用

Question

我用二维码生成器制作了一个表格。 qrcode 生成为 svg，并且在代码下方还生成了一个下载按钮。当我单击下载按钮时，它通常应该对我的 php 脚本执行 AJAX 调用。但它没有任何作用。浏览器开发工具中的网络选项卡显示没有进行任何调用。

希望有人可以解释为什么会发生这种情况以及如何解决。我提供下面的代码。需要明确的是，实际上什么也没有发生。我还在我的 downloadQrCode php 脚本中尝试了 var_dump ，但它没有被执行

showLinkGenerator.html.php（带有按钮生成和ajax的视图）

// Downloadfunktion für QrCode
        $('#pm_publish_content_form_dl_button').on('click', function () {
            $.post(
                '<?= $view['cms_file']->resourceUrl('cms/php/contentpublisher/ajax/admin/downloadQrCode.php') ?>',
                {},
                function (data) {
                    let blob = new Blob([data], {type: 'application/eps'});
                    window.location = URL.createObjectURL(blob);
                }
            )
        });

        function generateQrCode() {
            $.post(
                '<?= $view['cms_file']->resourceUrl('cms/php/contentpublisher/ajax/admin/generateQrCode.php') ?>',
                {
                    url: $siteUrl.val(),
                    qrCodeType: $('#pm_publish_content_form_ct_qrcode_dropdown').val()
                },
                function (data) {
                    ($('#pm_publish_content_form_ct_qrcode_dropdown_container')).after(data);
                    $('<div id="pm_publish_content_form_dl_button_container" class="dl-button-container"><button ' +
                        'type="button" ' +
                        'id="pm_publish_content_form_dl_button" ' +
                        'name="pm_publish_content_form[dl_button]" ' +
                        'class="btn btn-form" ' +
                        'style="position: absolute; bottom: 0; margin-left: 5px;">' + trans('link_generation.download', {}, 'contentpublisher_admin') +
                        '</button></div>')
                        .insertAfter($('.qrcode'));
                }
            );
        }

downloadQrCode.php（脚本 AJAX 正在调用）

use pm\Web\CMS\ContentPublisher\Controller\ContentPublisherAdminController;
use Symfony\Component\HttpFoundation\RequestStack;

require '../../../../bootstrap.php';

global $container;

$request = $container->get(RequestStack::class)->getMainRequest();

$lan = $request->get('lang');

/** @var ContentPublisherAdminController $controller */
$controller = ContentPublisherAdminController::createWithContainer($lan);
echo $controller->downloadQrCode();

ContentPublisherController.php（应执行的函数）

public function downloadQrCode() {
        $filePath = __DIR__ . '/qrcode.eps';

        if(!file_exists($filePath)) {
            header('HTTP/1.1 404 Not Found');
            exit;
        }

        header('Content-Type: application/eps');
        header('Content-Disposition: attachment; filename="' . 'qrcode.eps' . '"');
        header('Content-Length: ' . filesize($filePath));

        return file_get_contents($filePath);
    }

Answer 1

尝试像这样使用这个功能

// Downloadfunktion für QrCode
    $(document).on('click', '#pm_publish_content_form_dl_button', function () {
        $.post(
            '<?= $view['cms_file']->resourceUrl('cms/php/contentpublisher/ajax/admin/downloadQrCode.php') ?>',
            {},
            function (data) {
                let blob = new Blob([data], {type: 'application/eps'});
                window.location = URL.createObjectURL(blob);
            }
        )
    });

1. $(document)：选择整个 HTML 文档对象。在 jQuery 中，$ 函数用于选择元素并创建可操作的 jQuery 对象。

2. .on('click', '#pm_publish_content_form_dl_button', function () { ... })：jQuery 中的 .on() 方法用于将一个或多个事件的事件处理函数附加到所选元素。在本例中，事件处理程序用于“单击”事件。

3. 'click'：这是正在侦听的事件类型。它指定当点击事件发生时应执行以下函数。

4. '#pm_publish_content_form_dl_button'：这是事件处理程序所附加到的元素的选择器。它是一个 ID 选择器 (#)，这意味着它正在寻找 ID 为 pm_publish_content_form_dl_button 的元素。

5. function () { ... }：这是一个匿名函数，当 ID 为 pm_publish_content_form_dl_button 的元素发生点击事件时将执行。该函数是事件处理程序。

当用户点击 ID 为 pm_publish_content_form_dl_button 的元素时，.on() 方法中的匿名函数将被执行。您可以将自定义代码放入此函数中，以定义单击按钮时应发生的情况。