如何让这个Javascript在成功时将用户重定向到另一个页面，而不是向上滑动面板

How to make this Javascript redirect the user to a different page on success instead of sliding up a panel

本文关键字：另一个 Javascript 成功 重定向 用户      更新时间：2023-09-26

好的，所以我不擅长Javascript。但我已经在现有的网页中继承了这篇文章，现在我需要改变它的行为。在成功完成表单的那一刻，一个窗格向上滑动，告诉用户他们的信息已经收到等。如果他们错过了一个字段或键入了错误的内容，那么它就会显示错误。表单的实际验证是在php中完成的，但它的输出是使用这个javascript段显示的。

我想继续使用现有脚本在向上滑动窗格中显示错误，但如果表单填写正确，我现在希望用户重定向到新页面
我想把window.location（"新页面"）放在最后会有用。。。。但它不是

有人能告诉我这个代码的哪一部分相当于"如果成功地做到了……"吗

请参阅下面的代码。。。

$(document).ready(function() {
    /*ajax form*/
    $('#formCallback').submit(function(){
        //var opt = $("#chkTCs").is(':checked') ? $("#chkTCs").val() : null;
        var action = $(this).attr('action');
        $('#formCallback #submit').attr('disabled','disabled').after('<img src="../resources/images/indicator.gif" class="loader" />');
        $("#message").slideUp(750,function() {
        $('#message').hide();
        $.post(action, { 
            txtName: $('#txtName').val(),
            txtSurname: $('#txtSurname').val(),
            txtEmail: $('#txtEmail').val(),
            txtNumber: $('#txtNumber').val(),
            txtPostcode: $('#txtPostcode').val(),
            //chkTCs: opt,
            verify: $('#verify').val()
        },
            function(data){
                document.getElementById('message').innerHTML = data;
                $('#message').slideDown('slow');
                $('#formCallback img.loader').fadeOut('fast',function(){$(this).remove()});
                $('#formCallback #submit').attr('disabled',''); 
                if(data.match('success') != null) $('#success.pho').slideUp('slow');    
            }
        );
        });
        return false;
    });
    /*ajax form*/
});

更改此行：

 if(data.match('success') != null) $('#success.pho').slideUp('slow');

对此：

if(data.match('success') != null){
    document.location.href = "www.someexamplesite.com";
}

所以您继承了一些s***y代码，现在您需要添加一个新功能，对吗？这实际上是一个学习新事物的好机会，例如：

1） 可读性很重要，你更喜欢哪一个？

这个：

$.post(action, { 
        txtName: $('#txtName').val(),
        txtSurname: $('#txtSurname').val(),
        txtEmail: $('#txtEmail').val(),
        txtNumber: $('#txtNumber').val(),
        txtPostcode: $('#txtPostcode').val(),
        //chkTCs: opt,
        verify: $('#verify').val()
    },
        function(data){
            document.getElementById('message').innerHTML = data;
            $('#message').slideDown('slow');
            $('#formCallback img.loader').fadeOut('fast',function(){$(this).remove()});
            $('#formCallback #submit').attr('disabled',''); 
            if(data.match('success') != null) $('#success.pho').slideUp('slow');    
        }
    );
    });

还是这个？

$.ajax({
    type: "POST",
    url: action,
    data: {
        txtName: $('#txtName').val(),
        txtSurname: $('#txtSurname').val(),
        txtEmail: $('#txtEmail').val(),
        txtNumber: $('#txtNumber').val(),
        txtPostcode: $('#txtPostcode').val(),
        //chkTCs: opt,
        verify: $('#verify').val()
    },
    success: function (data) {
        document.getElementById('message').innerHTML = data;
        $('#message').slideDown('slow');
        $('#formCallback img.loader').fadeOut('fast',function(){$(this).remove()});
        $('#formCallback #submit').attr('disabled',''); 
        if(data.match('success') != null) $('#success.pho').slideUp('slow');
    }
});

2） 避免双极编程。如果您正在使用jQuery，那么请使用jQuery

document.getElementById('message').innerHTML = data;
$('#message').slideDown('slow');

将此document.getElementById('message')替换为此$('#message')。

现在，为了回答你的问题：如果你想在动画消息出现后重定向用户，你可以使用这个：

success: function (data) {
    document.getElementById('message').innerHTML = data;
    $('#message').slideDown('slow');
    $('#formCallback img.loader').fadeOut('fast',function(){$(this).remove()});
    $('#formCallback #submit').attr('disabled',''); 
    if(data.match('success')) {        
        $('#success.pho').slideUp('slow', function() {
            // Animation complete.
            window.location.replace("http://stackoverflow.com");
        }
    }    
}
相关文章：