Question

我在两个不同的页面上有两个几乎相同的表单，它们包含用户的姓名和电子邮件地址。当我按下提交按钮时，它们都会调用一个正常工作的验证器，然后它们都应该进行Ajax调用并显示结果。此时，其中一个成功调用，另一个只刷新页面。我不确定导致一个成功工作而另一个失败的区别是什么。对于有效的那个，我已经有了这个问题一次有效的表单，这是由我通过javascript生成表单引起的。我不知道现在是什么造成的。以下是功能正常的内联代码：

<!--// MODAL: INVITE //-->
<div id="inviteModal" class="modal" style="display: none">
   <div class="response"></div>
   <form id="inviteForm" >
   <script type="text/javascript" src="/includes/js/jquery-1.7.2.min.js"></script>
   <script type="text/javascript">
     var invites = <?php echo $user->getInvitesLeft(); ?>;
   </script>
   </form>
</div>

响应是显示Ajax调用响应的位置。我必须稍后使用Javascript生成内容，因为我根据邀请的值采取不同的操作。我最初生成了整个东西，但我发现我必须使用表单标签来防止第一次出现刷新问题。以下是生成用户看到的表单的代码：

if(invites < 1){
        $("#inviteModal").html("You have no invites left. You can get more by increasing your score.");
    }
    else{
        $("#inviteForm").html("<h2>Please enter the specified information for the friend you wish to invite. </h2>"+
       "<p>First: <input type=\"text\" name=\"first\"></p>"+
       "<p>Last: <input type=\"text\" name=\"last\"></p>"+
       "<p>Email: <input type=\"text\" name=\"email\"></p>"+
       "<p><input type=\"submit\" name=\"submit\" value=\"Invite\"></p>");
    }
    $("#inviteModal").css('display', "block");
    $("#overlay").css("display", "block");

这是验证器功能：

$("#inviteForm").validate({
//Rules for invite validation
rules: {
            first: "required",
            email: {
                required: true,
                email: true
            }
        },
//Messages to print if validation fails
messages: {
            first: "Please provide your friend's name.",
            email: "We cannot contact your friend without a valid email address.",
        },
//What to do when validation succeeds
submitHandler: function(form) {
            //Form is valid, make Ajax call
            $.ajax({
            type: "POST",
            url: '/invite/process',
            data: $("#inviteForm").serialize(),
            datatype: "html",
            success: function(data, textStatus ,XHR) {
                //alert(data);

                if(data.indexOf("Thank you") >= 0 ){
                    $("#inviteModal .response").text(data);
                    invites -=1;
                }
                else{
                    $("#inviteModal .response").text(data);
                }
            }
            }); //End ajax
        } //End submitHandler
}); //End validator

正如我所说的，这个完美无缺。这个和刷新的唯一区别在于，无法运行的页面不必登录即可查看，并根据用户是否登录采取不同的操作。这是内联代码：

<!--// MODAL: INVITE //-->
<div id="inviteModal" class="modal" style="display: none">
<div class="response"></div>
<form id="inviteForm" >
<script type="text/javascript" src="/includes/js/jquery-1.7.2.min.js"></script>
<?php 
if(!$user || $user == null){ //No user logged in, display invite request form instead 
   $loggedin = false;
}
else{ //Allow user to invite friends
   $loggedin = true; 
}  
?>
</form>

这是生成代码，除了一个额外的if层之外几乎相同：

if(!loggedin){
        $("#inviteForm").html("<h2>Please enter the specified information to request an invitation. </h2>"+
           "<p>First: <input type=\"text\" name=\"first\"></p>"+
           "<p>Last: <input type=\"text\" name=\"last\"></p>"+
           "<p>Email: <input type=\"text\" name=\"email\"></p>"+
           "<p><input type=\"submit\" name=\"submit\" value=\"Invite\"></p>");
    }
else{
        invites = <?php echo $user->getInvitesLeft(); ?>;
        if(invites < 1){
            $("#inviteModal").html("You have no invites left. You can get more by increasing your score.");
        }
        else{
            $("#inviteForm").html("<h2>Please enter the specified information for the friend you wish to invite. </h2>"+
           "<p>First: <input type=\"text\" name=\"first\"></p>"+
           "<p>Last: <input type=\"text\" name=\"last\"></p>"+
           "<p>Email: <input type=\"text\" name=\"email\"></p>"+
           "<p><input type=\"submit\" name=\"submit\" value=\"Invite\"></p>");
        }
    }
    $("#inviteModal").css('display', "block");
    $("#overlay").css("display", "block");

这是验证器：

$("#inviteForm").validate({
//Rules for invite validation
rules: {
            first: "required",
            email: {
                required: true,
                email: true
            }
        },
//Messages to print if validation fails
messages: {
            first: "Please provide your friend's name.",
            email: "We cannot contact your friend without a valid email address.",
        },
//What to do when validation succeeds
submitHandler: function(form) {
            //Form is valid, make Ajax call
            if(loggedIn){   //They are inviting a friend
                $.ajax({
                    type: "POST",
                    url: '/invite/process',
                    data: $("#inviteForm").serialize(),
                    datatype: "html",
                    success: function(data, textStatus ,XHR) {
                        //alert(data);

                        if(data.indexOf("Thank you") >= 0 ){
                            $("#inviteModal .response").text(data);
                            invites -=1;
                            //$("#overlay").css("display", "none");
                            //$("#inviteModal").fadeOut(5000);
                        }
                        else{
                            $("#inviteModal .response").text(data);
                        }
                        return false;
                    }
                }); //End Ajax
            }
            else{ //They are requesting an invite for theirself
                $.ajax({
                    type: "POST",
                    url: '/invite/request',
                    data: $("#inviteForm").serialize(),
                    datatype: "html",
                    success: function(data, textStatus ,XHR) {
                        //alert(data);

                        $("#inviteModal .response").text(data);

                        return false;
                    }
                }); //End ajax
            }
                            return false;
        } //End submitHandler
}); //End validate

除了一个额外的if层外，几乎完全相同。那么为什么底部的那个刷新页面而不是进行Ajax调用而第一个工作完全正常呢？

Answer 1

如何在第二个ajax成功回调函数中注释掉那些return false语句？

两种近似相同的形式功能不同

1 个答案: