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方式了。

    评论

报告相同问题?

悬赏问题

  • ¥88 实在没有想法,需要个思路
  • ¥15 MATLAB报错输入参数太多
  • ¥15 python中合并修改日期相同的CSV文件并按照修改日期的名字命名文件
  • ¥15 有赏,i卡绘世画不出
  • ¥15 如何用stata画出文献中常见的安慰剂检验图
  • ¥15 c语言链表结构体数据插入
  • ¥40 使用MATLAB解答线性代数问题
  • ¥15 COCOS的问题COCOS的问题
  • ¥15 FPGA-SRIO初始化失败
  • ¥15 MapReduce实现倒排索引失败