disneylu 2013-08-12 15:35 采纳率: 0%
浏览 1669

jquerymobile写的一个登陆页面问题

用jquerymobile写了一个登陆页面,后台是spring3+mybatis,主要的思路是异步提交验证,如果验证失败,直接在页面上提示错误信息,验证成功则通过changePage刷新页面。

遇到的问题是:
1、在spring的controller中返回这个页面后,登录页面虽然展现出来了,但是$(document).ready(function() {...})没有起作用,手工强制刷新页面可以起作用;
2、Ajax的POST方式没有起作用,点击按钮总是GET方式。。。

页面代码如下,请各位大侠帮看下,真心感谢!

    <%@ page language="java" pageEncoding="UTF-8" %>
    <%@ include file="/WEB-INF/views/include/taglibs.jsp" %>
    <!DOCTYPE html> 
    <html>
    <head>
        <title>login</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

        <script type="text/javascript"> 
            function onSuccess(data, status) {
                data = $.parseJSON(data)
                //data = $.trim(data);
                if(data.flag == "Y") {
                    //成功,进入新页面
                    $.mobile.changePage(data.url);
                } else {
                    $("#message").css("color", "#ff0000");
                    $("#message").text(data.msg);
                }
            }   


        $(document).ready(function() {
            alert("ready");
            $("#btnLogin").click(function(e){
                var formData = $("#frmLogin").serialize();
                alert(formData);
                $.ajax({
                    type: "POST",
                    url: "${ctx}/login",
                    cache: false,
                    data: formData,
                    success: onSuccess
                });
                e.preventDefault();
            });
        });

        </script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    </head>
    <body>
        <div id="message"></div>
        <form id="frmLogin">
            <label for="memberId">会员ID:</label>
            <input name="memberId" id="memberId" data-mini="true" data-clear-btn="true" type="text" autofocus required>     
            <label for="password">密码:</label>
            <input name="password" id="password" data-mini="true" type="password" autofocus required>
            <br/>
            <div align="center">
            <input value="提交验证" id="btnLogin" type=submit data-inline="true" data-mini="true" data-icon="check" data-theme="b">

            <!-- 
            <input value="重       填" type="reset" data-inline="true" data-mini="true" data-icon="delete" data-theme="b">
            -->
            </div>
        </form>
    </body>
    </html>
  • 写回答

1条回答

  • ChatGPTᴼᴾᴱᴺᴬᴵ 2023-01-12 10:19
    关注

    问题 1 的原因是 jQuery Mobile 会替代默认的页面刷新机制,而使用异步技术 (Ajax) 加载新页面,所以需要在页面加载完成后重新绑定事件处理程序。可以使用 jQuery Mobile 提供的 pageinit 事件来重新绑定事件处理程序,类似于 $(document).ready(function() {...}) 的用法。
    例如:

    $(document).on("pageinit", "#pageId", function(){
      alert("ready");
      $("#btnLogin").click(function(e){
        // code here
      });
    });
    

    问题 2 的原因是jQuery mobile默认是使用Ajax方式来加载页面,阻止了默认的Form提交方式。可以在点击按钮的时候使用e.preventDefault();阻止默认事件来解决这个问题。
    在上面的代码中已经加了e.preventDefault();,提交方式已经转为Ajax方式了。

    评论

报告相同问题?

悬赏问题

  • ¥15 求daily translation(DT)偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的?
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 关于#python#的问题:自动化测试