Question

我正在尝试创建一个表单，在提交时，发送数据，然后当页面重新加载时，用户将返回到他们在使用javascript或jquery提交表单之前的页面上的相同位置。

Answer 1

未经测试，但您可以采取以下措施：

$(function() {
    var lst = localStorage.getItem('lastScrollTop');
    if(lst !== null) {
        $(window).scrollTop(lst);
        localStorage.removeItem('lastScrollTop');
    }
    $("form").on('submit', function() {
        //use whatever persistence method you'd like, I'm using HTML5 localStorage for brevity
        localStorage.setItem('lastScrollTop', $(window).scrollTop());
    });
});

Answer 2

首先，使用JQuery要好得多，因为它有很多内置方法。我通常使用.ajax as it is very flexible，可以非常快速地用于GET和POST数据。

现在开始如何做..

$.ajax({
    url : "AJAX_POST_URL",
    type: "POST",
    data : formData,  //The best way to formulate is using JSON and server to accept it
    success: function(data, textStatus, jqXHR)
    {
        //data - response from server
    },
    error: function (jqXHR, textStatus, errorThrown)
    {

    }
});

Answer 3

您可以阻止默认提交，然后使用Ajax提交，这样您就不会离开页面。

$(document).ready(function(){
    // your form
    var $myForm = $('form');

    $myForm.on('submit', function(e){
        // stops the from from submitting and loading a new page.
        e.preventDefault();

        // use jQuery post to post the form fields to the default from action
        $.post($myForm.attr('action'), $myForm.serialize(), function(data){
           console.log(data);
        });
    });
});

如何提交表单然后让浏览器返回到页面上的相同位置？

3 个答案: