Question

我知道使用.submit会在单击提交按钮时触发事件。但是我想在单击提交按钮并重新加载页面时触发事件（我认为每个页面在提交表单后重新加载）。

这是一个例子：

    // Registration
$j("#register-form form").submit(function() {
          window.alert("submitted");
    $j("#registration-notification").animate({
            height: "21px",
            opacity: 1,
            'padding-top': "8px"
        }, 800 );
    return true;
});

    $j("#close-button").click( function() {
        $j("#registration-notification").animate({
          height: "0px",
          opacity: 0,
          'padding-top': "0px"
        }, 800 );
    });

使用该代码显示通知，但页面会立即刷新。我想要的是在页面刷新后显示通知。）

有任何建议可以实现这一目标吗？

Answer 1

在提交页面时使用简单的cookie存储，并在加载时读取该cookie，如果存在，则显示通知，然后删除cookie。

编辑：示例解决方案，使用jQuery Cookie plugin：

请参阅此处的jsFiddle简单示例：http://jsfiddle.net/8952S/

这是一个简单的例子，可以根据您的需要进行调整。

$(document).ready(function() {
    // check if user just submitted this page
    var justSubmitted = $.cookie('just_submitted');
    if (justSubmitted) {
        $("#registration-notification").show();
        // delete the cookie
        $.cookie('just_submitted', null);
    }

    // Registration
    $("form").submit(function() {
        // create a cookie, then let it submit normally
        $.cookie('just_submitted', 'true');
    });
});

Answer 2

您会考虑一种不需要页面刷新的方法吗？更优雅的解决方案是从提交按钮单击事件处理程序返回false，这意味着页面不会刷新，在此之前，在click事件处理程序内部发出ajax请求以提交表单，然后处理响应并为注册设置动画 - 通知元素。这样就不需要整个页面的服务器往返。如果您决定遵循此路线，此代码段应该可以帮助您（我不确定您的标记，因此无法保证这将起作用）。

$j('#register-form form').submit(function() {

    // disable the submit button to avoid duplicate submits
    $j('#submit').attr('disabled', true);

    // send registration request to the server
    $j.ajax({
        url: "URL/To/My/RegistrationPage.php",
        type: "post",
        async: false,
        success: function (data) {
            $j("#registration-notification").animate({
                'height': '21px',
                'opacity': '1',
                'padding-top': '8px'
            }, 800);
        },
        error: function (data) {
            // something bad happened - must deal with it
            alert(data.responseText);
        }
    });

    // return false so that the page does not reload
    return false;
});

另外，请参阅jquery文档，它对我来说总是很有帮助：http://api.jquery.com/jQuery.ajax/

如果绝对必须在页面重新加载之后，那么GregL的答案可能更合适。

在提交表单并重新加载页面后使用jQuery显示通知？

2 个答案: