HTML5 具有 AJAX 形式的历史记录

Question

我正在尝试使用 AJAX 表单实现 HTML5 历史记录。

表单包含一些单选按钮和下拉菜单。更改这些输入中的任何一个后，将自动提交表单并通过 AJAX.

返回结果

现在已经实现了历史记录，URL 得到更新，因此它看起来像这样，例如：

/currencies?type=usd&year=2015

这是我执行 AJAX 和更新 URL 的方法：

$('#currency-form input, #currency-form select').change(function() {
    var form = $('#currency-form');
    var url = form.attr('action');
    var data = form.serialize();

    $.ajax({
        url: url,
        type: 'get',
        dataType: 'json',
        data: data,
        success: function(response) {
            // update the page content
            processResponse(response.data);

            // update the page url
            window.history.pushState({}, response.meta_title, response.new_url);
        }
    });
});

为了检测后退按钮，我做了以下操作：

$(window).on('popstate', function(event) {
    var state = event.originalEvent.state;

    if (state !== null) {
        console.log(state);
    }
});

有一件事让我很苦恼。按后退按钮后，它应该预先 select 以前的表单值并再次提交表单。

有人知道我怎样才能做到这一点吗？

Answer 1

1- HTML5 标记方法：

为表单使用 Autocomplete 标签，HTML5，但不能确定所有浏览器的兼容性。

<form action="" method="post" autocomplete="on">

Check this post

2- jQuery 方法：

看这个例子：使用 jQuery plugin 作为 cookie。

设置cookie；使用类似于此示例的内容：

(function(){
// get elements values
var checkbox1 = $('#checkbox1').val();
var radio1 = $('input[id="radio1"]:checked').val();
var textbox1 = $("#textbox1").val()
//save elements values into cookies
$.cookie("radio1", checkbox1);  
$.cookie("checkbox1", radio1);  
$.cookie("textbox1", textbox1);  

});

然后在您想要的事件上加载值：

(function (){
//read value from cookie.
var radio1= $.cookie("radio1");
var checkbox1= $.cookie("checkbox1");
var textbox1= $.cookie("textbox1");
$('#radio1').prop('checked', radio1);
$('#checkbox1').prop('checked', checkbox1);
$('#textbox1').val(textbox1);


// Etc...
});

提交或实时编辑时；尝试将条目保存在 cookie 中，当您返回表单时...将该值加载到字段中。

3- 从 JSON 数据填充：

Reference:

// reset form values from json object
$.each(data, function(name, val){
    var $el = $('[name="'+name+'"]'),
        type = $el.attr('type');

    switch(type){
        case 'checkbox':
            $el.attr('checked', 'checked');
            break;
        case 'radio':
            $el.filter('[value="'+val+'"]').attr('checked', 'checked');
            break;
        default:
            $el.val(val);
    }
});

Answer 2

完成此操作的方法是将新的输入字段值推送到 state，如下所示：

var state = {
    field1: $('#input1').val(),
    field2: $('#input2').val()
};

window.history.pushState(state, response.meta_title, response.new_url);

然后当您检测到后退按钮事件时，执行以下操作以重新填充输入字段：

$('#input1').val(state.field1);
$('#input2').val(state.field2);

HTML5 具有 AJAX 形式的历史记录

HTML5 history with AJAX form

javascript

ajax

jquery

html5-history

1- HTML5 标记方法：

2- jQuery 方法：

3- 从 JSON 数据填充：