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

时间:2014-12-18 20:20:26

标签: javascript jquery forms

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

3 个答案:

答案 0 :(得分:3)

未经测试,但您可以采取以下措施:

$(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());
    });
});

答案 1 :(得分:0)

首先,使用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)
    {

    }
});

答案 2 :(得分:0)

您可以阻止默认提交,然后使用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);
        });
    });
});