在 jQuery Mobile 中使用 Ajax 重新发布表单，以获取后退/前进历史记录

Question

我正在调查 jQM 历史管理对于我组织的移动网站的适用性。我们的部分要求是，当用户发布表单时，它使用 Ajax 进行发布。当用户点击“后退”然后“前进”浏览器按钮时，我们需要再次使用 Ajax 重新发布表单。这是一个图表：

1. [home.php: post to new.php] =>
2. [new.php: 发布到 list.php] =>
3. [从list.php，点击两次返回home.php] =>
4. [* home.php：单击 fwd，对 new.php 执行 GET 请求 *] =>
5. [* new.php：单击 fwd，对 list.php 执行 GET 请求 *]

[*] 不是我想要的行为。我想重新发布步骤 1 和 2 中的数据

在步骤 4 和 5 期间，我想在“pagebeforeload”事件（似乎是正确的位置）处拦截 jQM 执行，并修改 data.options.data （以包括传递给事件处理程序的数据对象的序列化后数据）和 data.options.type（至 POST）属性。然后我会让页面加载过程继续使用修改后的值。我认为这会给我带来我想要的行为。

到目前为止，我发现我可以拦截 pagebeforeload 事件并使用以下事件处理程序修改值：

$(document).bind("pagebeforeload",
    function( e, data ) {
        console.log(data.toPage);
        console.log(data.options);
        data.options.type = "POST";
        data.options.data = "edit=Hanford";
    }
);

但缺少的部分是，如何“存储”步骤 1 和 2 中的信息，以便当我拦截 pagebeforeload 事件时在4和5中，我可以知道如何正确修改“type”和“data”属性。

我制作了一个 jquery/浏览器历史原型来说明我希望从 jQuery Mobile 获得的行为。 JavaScript 是：

$(window).load(function() {
    //listen to the history popstate event
    $(window).bind('popstate',
    function(e) {
        if (e.originalEvent.state && e.originalEvent.state.type && e.originalEvent.state.type == "post") {
            //do an ajax post based on what is stored in history state
            $.post(e.originalEvent.state.path,
            e.originalEvent.state.data,
            function(data) {jaxer(data,'POST')});
        } else if (e.originalEvent.state !== undefined){
            //do an ajax get
            $.get(location.pathname,
            function(data) {jaxer(data,'GET')});
        }
    });
    //add event listeners
    addClickHandler();
});
function jaxer(data, msg) {
        if (msg) {console.log(msg+' request made using ajax');}
        $('#slider')[0].innerHTML = data;
        addClickHandler();
}

//hijax hyperlinks and form submissions
function addClickHandler() {
    $('a').click(function(e) {
        history.pushState({
            path: this.path
        },
        '', this.href);
        $.get(this.href,
       function(data) {jaxer(data,'GET')});
       e.preventDefault()
    });
    $('form').submit(function(e) {
        var formData = $(this).serialize();
        console.log('saving serialized form data into historyState: '+formData);
        history.pushState({path: this.action, data: formData, type: "post"},'',this.action);
        $.post(this.action,
        $(this).serialize(),
        function(data) {jaxer(data,'POST')});
        e.preventDefault();
    });
    //add the form submit button to the form as a hidden input such that it will get serialized
    $('form input[type="submit"]').click(function() {
        $(this.form).append("<input type='hidden' name='" + this.name + "' value='" + this.value + "'/>");
    });
    console.log("event handlers added to DOM");
};

当用户启动的 POST 发生时，我将序列化的 POST 数据放入历史记录的状态对象中。然后，当 popstate 事件发生时，我可以查询状态对象以获取此信息。如果我找到它，那么我可以执行 ajax POST。我想在 jQuery Mobile 历史记录处理中获得相同的功能。这样我就可以利用页面更改动画等。