Question

在jQuery中，我有一个提交的表单，使用ColdFusion从数据库中获取数据，然后在新页面上显示一些数据。问题是，每当我切换到新页面时，它会闪烁一秒钟，然后将我重定向回起始页面。 Here是相关页面。只需输入9355作为您要搜索的许可证号码。

以下是它背后的代码：

允许页面

 <div data-role="page" id = 'permit' data-add-back-btn="true">
        <div data-role="header">
            <h1>Parking Permit Number Search</h1>
        </div><!-- /header -->
        <div data-role="content">
            <div class="ui-grid-solo">
                <div class="ui-block-a"><br></div>
                <div class="ui-block-a">
                <form id="formpermit">
                    <input type="text" data-clear-btn="true" name="permittext" id="permittext" value="">
                </form>
                </div>
                <script type="text/javascript">
                $("#formpermit").on("submit",function() {
                    $.mobile.changePage("#Student");
                });         
                </script>
                <div class="ui-block-a">
                <!-- <a href='#Student' data-role="button" onclick="formpermit.submit()" data-inline="true">Search</a> -->
                </div>
            </div><!-- /grid solo -->   
        </div><!-- /content --> 
        <a href='#bug' data-rel="dialog" onclick="clearText()" data-close-btn="left" data-role="button" data-inline="true">Report bug</a>
    </div> <!--/Permit Number -->

学生页面

<div data-role="page" id = 'Student' data-add-back-btn="true">
    <div data-role="header">
        <h1>Student Info Page</h1>
    </div><!-- /header -->
    <div data-role="content">
        <script type="text/javascript">
        $("#formpermit").on("submit",function() {                       
            var strPermit=$(permittext).val();
                strPermit=$.trim(strPermit);

                $.get("joeyP.cfm", { Permit: strPermit})
                .done(function(data) {
                  $("#myResults").html(data);
                });                
            });
        </script>
        <div id="myResults"></div>
    </div> <!-- /content -->
    <a href='#first' data-role="button" data-inline="true">Back</a>
</div> <!--/Student -->

提前致谢！

Answer 1

您需要通过从事件处理程序返回false来阻止提交提交的页面：

$("#formpermit").on("submit",function() {
   ... 
   return false;
});

可能在你的两个案例中。

Answer 2

当您点击提交按钮时，您的浏览器会在新请求中发布数据。

您应该阻止此默认行为。您可以使用preventDefault()对象上的event函数执行此操作。 event对象get作为第一个参数传递给侦听器的回调函数。

$("#formpermit").on("submit", function(event) {

    event.preventDefault()

    // rest of your code here

})

jQuery页面更改然后更改回来

2 个答案: