javascript - 如何从导航栏 href 链接调用 servlet，并调用 jquery 函数以在单击时缓慢向下滚动

Question

如何从导航栏 href 链接调用 servlet，同时调用 jquery 函数以缓慢向下滚动

我尝试从onclick href链接调用servlet，它正在调用但没有同时调用jquery函数

   Code for slow scroll down

    $("#apply").click(function() {
        $('html,body').animate({
            scrollTop : $("#applyleave").offset().top
        }, 500);
    });

 Code for calling servlet
function myFunction1() {
        window.location.href = "http://localhost:9091/LeaveManagementProject/ApproveLeave";
    }

没有错误消息，只是它只调用一个函数而不是两个在此处输入代码

Answer 1

如果要获取数据并在获取数据期间滚动，则需要停止请求并使用 XHR 来完成。

// this makes an asynchronous request to fetch data and executes the callback function
var sendXHRPost = void 0;
{
    sendXHRPost = function (url, params, callback) {
        var http = new XMLHttpRequest();
        http.open('POST', url, true);
        http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                callback(http.status, http.responseText, clickedElement);
            }
        }
        http.send(params);
    }
}
// your scroll function
var scrollFunction = void 0;
{
    scrollFunction = function (status, response, clickedElement) {
        // update your DOM with reponse here
        // Then scroll
        $("#apply").click(function() {
            $('html,body').animate({
                scrollTop : $(clickedElement.href).offset().top
            }, 500);
        });
    }
}
// Handle the click on your element
var clickFunction = void 0;
{
    clickFunction = function (e) {
        e.preventDefault();
        var myURL = "http://localhost:9091/LeaveManagementProject/ApproveLeave";
        sendXHRPost(myURL, null, scrollFunction, e.currentTarget);
    }
}
document.getElementById("apply1").addEventListener("click", clickFunction, false);

希望这有帮助。