可重用 Ajax 调用 X 次，具有相同的逻辑

Question

这是非常糟糕的代码

我需要做类似的逻辑但没有 setInterval。

有基础5模态对话框

<span class="spanButton registration" data-reveal-id="addExternalRegistration">Add external registration</span>

这个显示空模态的按钮

<div id="addExternalRegistration" class="reveal-modal" data-reveal aria-hidden="true">

并且 jQuery 我正在用表单填写对话框。

在 Ajax 成功中，如果表单有错误，我会更改对话框中的内容。故事到此结束。但是我需要在表单有效之前覆盖 x 次提交。

setInterval 会破坏内存我知道，这只是展示我想要的示例。

response 是有错误的新表格，不应该提交，需要发送 ajax 请求和所有在 x 圈中的所有内容。

$('.registration').click(function () {
            $('#addExternalRegistration').load("/dashboard/add-external-registration/{{ confName }}");

            setInterval(function () {
                $('form[name="dashboard_conference_registration_form"]').on('submit', function (e) {
                    e.preventDefault();

                    $.ajax({
                        url: '/dashboard/add-external-registration/{{ confName }}',
                        method: 'POST',
                        data: $(this).serialize(),
                        success: function(response) {
                            $('#addExternalRegistration').html(response);
                        }
                    });
                });
            }, 3000);
        });

Answer 1

我在玩老把戏

递归调用

这是发送 ajax 无限次请求的函数

(in theory because of leak of memory, unfortunately).

var ajax = function () {
            $('form[name="dashboard_conference_registration_form"]').on('submit', function (e) {
                e.preventDefault();

                $.ajax({
                    url: '/dashboard/add-external-registration/{{ confName }}',
                    method: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        $('#addExternalRegistration').html(function () {
                            return response;
                        });
                        setTimeout(ajax(), 2000);

                    }
                });
            });
        };

然后我调用在提交时触发递归的递归函数。

        $('.registration').click(function () {
            $('#addExternalRegistration').load("/dashboard/add-external-registration/{{ confName }}",
                    // Wait until form is loaded at modal window
                    // And then do the logic
                    function () {
                        $('form[name="dashboard_conference_registration_form"]').on('submit', function (e) {
                            e.preventDefault();

                            $.ajax({
                                url: '/dashboard/add-external-registration/{{ confName }}',
                                method: 'POST',
                                data: $(this).serialize(),
                                success: function(response) {
                                    $('#addExternalRegistration').html(function () {
                                        return response;
                                    });
                                    setTimeout(ajax(), 2000);
                                }
                            });
                        });
                    }
            );

        });

可重用 Ajax 调用 X 次，具有相同的逻辑

Reusable Ajax call in X times with same logic

javascript

ajax

jquery

symfony-forms

zurb-foundation