ajax - 阿贾克斯回到上一页

Question

我有一个由 jQuery Ajax 插入到页面 div 的表单（比如“内容”），当用户完成填写表单并点击“提交”按钮时，将显示结果以供进一步验证。html和ajax代码如下：

HTML：

<form id="userForm" action="..." method="post">
  ...
  ...
</form>

阿贾克斯：

$(document).ready(function() {
  $('#userForm').ajaxForm({
    success: function(returnData) {
      $('#content').html(returnData);
    }
  });
});

“returnData”是用于进一步确认的填写表格（没有输入字段）。现在，如何实现“返回”按钮，以便用户可以返回并修改先前输入的数据？

我正在使用 Python 开发 Google App Engine。谢谢。

Answer 1

我不会form用新的 HTML 替换。

我宁愿隐藏表单display: none并添加新的 HTML 以便在旁边查看。如果要返回，则只需隐藏“查看 div”并再次显示form，无需重新填充任何输入元素。

这些方面的东西应该起作用

HTML：

<div id="content">
    <div id="user-form-container">
        <form id="userForm" ...>...</form>
    </div>

    <div id="viewing-container"></div>
</div>

CSS：

#viewing-container {
    display: none;
}

查看部分包含某种back-button，它隐藏查看区域并再次显示表单

问：

$(document).ready(function() {
    $('#userForm').ajaxForm({
        success: function(returnData) {
            $('#viewing-container').html(returnData);
            $('#user-form-container').hide();
            $('#viewing-container').show();
            $('#viewing-container #back-button').click(function() {
                $('#user-form-container').show();
                $('#viewing-container').hide();
            });
        }
    });
});