Question

我在以下场景中使用jQuery进行经典ASP：

1）用户键入格式为[R] \ d {8}的客户端ID（标题ID）并按#searchForm中的搜索按钮：

<form id="searchForm" method="get">
    <input type="text" name="bannerID" class="required" id="bannerID" value=""/>
    <input type="submit"  class="button" id="searchClients" value="Continue">
</form>

2）搜索表单调用搜索功能（AJAX POST到另一个返回结果的ASP Classic页面或NOTFOUND）：

 $('#searchForm').submit(function() {
  /*   ASSUMING THE BANNERID (STUDENT ID) MATCHES THE RIGHT FORMAT, SEARCH FOR IT  */
    sendSearchRequest(text)
    return false;
});

3）如果找到匹配记录，则向用户显示离开页面并编辑客户端记录或添加有关该客户端的信息的选项（教程）。否则，显示隐藏的添加用户表单：

function sendSearchRequest(text) {
/*   POST THE BANNERID (USER ID) TO A PAGE TO CHECK IF IT EXISTS  */
        var jsonToSend={ bannerid: text} ;

           $.ajax({
               type: "POST",
               url: 'staff_client_search_single_ajax.asp',
               data: jsonToSend,
               success: function(response) {
               if (response=="NOTFOUND") {
            /*   COULD BE A NEW CLIENT OR A MISKEYED CLIENT ID; */
                 $('#newClientForm').fadeIn('slow');
                 $('#spnBannerID').text(text);
                 $('#divSearch').fadeOut('slow');
                 }
               else
               {
                    $("#user-info").html(response);
                    var user_id=$('#existing-user-id').text();
                    $('#existing-user-id').css('display','none');
                    dialog_ShowUserFound(user_id);
                }
               },
                error:function (xhr, ajaxOptions, thrownError){
                alert(xhr.status);
                alert(thrownError);
            }
           }); // end ajax
        }
}) // document ready

4）发布回来“未找到”，我隐藏了第一个表单，并显示第二个添加客户端：

<div id="newClientForm" style="display:none;">
<form id="addClientForm">
    <label for="spnBannerID">Banner ID</label>:&nbsp;<span name="spnBannerID" id="spnBannerID" style='font-weight:bold'></span>
    <label for="firstname">First Name</label><br/>
    <input type="text" name="firstname" id="firstname" value=""/>
</form>

5）第一个和第二个表格都没有回复;他们的提交处理程序被阻止，我改为执行AJAX调用：

$('#searchForm').submit(function() {
 /*   ASSUMING THE BANNERID (STUDENT ID) MATCHES THE RIGHT FORMAT, SEARCH FOR IT  */
sendSearchRequest(text)
return false;
});

$('#addClientForm').submit(function() {
    return false;
});

6）问题出现在用户处于ADD CLIENT表单中并意识到即使他提供了有效的客户端ID（R \ d {8）），他也没有输入正确的ID，因此他想要回到起点并输入正确的。

他按下后，页面返回到AJAX搜索POST后的状态，而不是初始搜索表单。该URL显示page.asp？bannerid = R11234123，它反映了发布的搜索表单。

如何进行设置，如果用户从“添加”表单中“退回”，他会回到开始而不是回到刚刚发布的搜索？

Answer 1

您可能希望查看使用历史插件并在表单更改时触发状态更改。在您收听这些更改时，如果您的代码没有触发它们，那么它就是一个后退按钮，然后您可以获取状态并显示相应的内容/表单。考虑标准页面，没有内容页面链接到内容部分的脚本，或“回到顶部”。单击其中一个链接后单击浏览器中的后退按钮将返回到页面中的先前位置。这是由于hashchange事件和状态更改造成的。历史插件可以更轻松地跨浏览器管理这些事件/状态。

要看的几个人：

http://benalman.com/projects/jquery-hashchange-plugin/

https://github.com/browserstate/history.js

jQuery 1表单查找，Ajax发布查找，第二表单添加如果找不到

1 个答案: