javascript – 使用AJAX表单的HTML5历史记录

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

表单包含一些单选按钮和下拉列表.更改任何这些输入后,表单将自动提交,结果将通过AJAX返回.

现在已经实现了历史记录,URL会更新,所以它看起来像这样：

/货币型= USD和放大器;年= 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);
    }
});

我正在努力解决一件事.按下后退按钮后,应预先选择以前的表格值并再次提交表格.

有谁知道我怎么能做到这一点？

解决方法

1- HTML5标记方法：

对表单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);
    }
});