Question

我有一个看起来像这样的ajax电话：

$("#loginForm").submit(function(e){
           $.ajax({
                type:'POST',
                url:'login.php',
                data: $("#loginForm").serialize();
                success: function(data){


                        if(data=="1"){
                        $("#message").html('<span class="gmessage">You are already logged in!</span>');
                        }
                        else if(data=="2"){
                            $("#message").html('<span class="gmessage">You have been logged in!</span><br/>'
                                               '<span class="bmessage">You will be redirected in 10 seconds</span>');
                            $("#message").fadeOut(1000, function(){
                                window.location = <?php echo $_SESSION['ref'];?>;
                            });
                        }
                        else if(data=="3"){
                             $("#message").html('<span class="rmessage">The password you entered was incorrect</span>');
                        }
                        else if(data=="4"){
                             $("#message").html('<span class="rmessage">That account does not exist, you may need to register for an account</span>');
                        }
                        else{
                            $("#message").html('<span class="rmessage">There was an error: please try again</span>');
                        }

                }

           });
           e.preventDefault();
        });

php已根据跨度中的消息进行了测试并按预期运行，但是当执行此ajax调用时，不会显示任何消息，如果它正在执行那么。相应的html是这样的：

       <tr>
         <td id="message" name="message" colspan="2"></td>
       </tr>
        <tr>
         <td colspan="2" style="height:50px">
           <center>
                <input type="submit" name="submit" id="submit" value="Login!" style="font-family: arial;font-size:14pt;"/><br/><br/>
                <span class="registerSpan">Don't have an account?:</span><br/><br/>
                <input type="button" onClick="parent.location='createacct.php'" style="font-family:arial; font-size:14pt;" value="Register"/>
          </center>
         </td>
        </tr>

这是什么原因不起作用？另一个相关问题：ajax是处理这个问题的最佳方法吗？

Answer 1

除了@Alexander指出的明显语法错误之外，您还应该传递dataType: "text"来告诉jQuery期望什么数据。

此外，如果您使用HTTP状态代码使用json会更好。成功函数可能看起来像

success(function(result) {
    var message = '<span class="gmessage">Some Initial text</span>';
    if(result.status == 200) {
        message = '<span class="gmessage">' + result.message + '</span>';
    }
    else if (result.status == 401) {
        .......
    }
    $('#message').html(message);
}

显然有一些方法可以通过使用模板进一步优化这一点，而不是进行大量的DOM操作。

Answer 2

使用jsfiddle's eslint checker，我对代码中存在的一些语法错误进行了排序。

$("#loginForm").submit(function(e){
       $.ajax({
            type:'POST',
            url:'login.php',
            data: $("#loginForm").serialize(),
            success: function(data){


                    if(data=="1"){
                    $("#message").html('<span class="gmessage">You are already logged in!</span>');
                    }
                    else if(data=="2"){
                        $("#message").html('<span class="gmessage">You have been logged in!</span><br/><span class="bmessage">You will be redirected in 10 seconds</span>');
                        $("#message").fadeOut(1000, function(){
                            window.location = <?php echo $_SESSION['ref'];?>;
                        });
                    }
                    else if(data=="3"){
                         $("#message").html('<span class="rmessage">The password you entered was incorrect</span>');
                    }
                    else if(data=="4"){
                         $("#message").html('<span class="rmessage">That account does not exist, you may need to register for an account</span>');
                    }
                    else{
                        $("#message").html('<span class="rmessage">There was an error: please try again</span>');
                    }

            }

       });
       e.preventDefault();
    });

jquery ajax调用没有按预期工作

2 个答案: