ajax形式的返回值答案

【问题标题】：Return value from ajax formajax形式的返回值
【发布时间】：2013-07-11 02:38:28
【问题描述】：

我在 php 中有一个登录表单。我使用了 ajaxform，以便在用户名或密码错误时不会重新加载页面。我有另一个页面 checklogin.php，它检查数据库中是否存在用户名和密码，并返回行数。我想比较 login.php 中的计数，如果 count=1 则显示错误消息，如果 count=2 则重定向到另一个页面。我尝试使用 target: 'errordiv' 在 errordiv 中显示计数并检查它的 innerHTML，但它没有这样做。

我的登录.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.form.js"></script>
<!--Slider-in icons-->
<script type="text/javascript">


    function checklogin()
    {
     var request=$("#login-form").ajaxForm(
                    {

                  target:'#errordiv'

                    }).abort();
                request.submit();
        var divmsg=document.getElementById("errordiv");
        if (divmsg.childNodes[0].nodeValue == "1")
            {
        divmsg.childNodesp[0].nodeValue="Sorry";
        alert ("Invalid username or password");} //I didn't get the alert as well a the divmsg content didn't change


                    };
</script>

</head>
<body>

<!--WRAPPER-->
<div id="wrapper">

<!--LOGIN FORM-->
<form name="login-form" id="login-form" class="login-form" action="checklogin.php" method="post">


    <!--CONTENT-->
    <div class="content">
    <!--USERNAME--><input name="un" type="text" class="input username" placeholder="Username" onfocus="this.value=''" required="required" /><!--END USERNAME-->
    <!--PASSWORD--><input name="pw" type="password" class="input password" placeholder="Password" onfocus="this.value=''" required="required" /><!--END PASSWORD-->
    </div>
    <!--END CONTENT-->

    <!--FOOTER-->
    <div class="footer">
    <!--LOGIN BUTTON--><input type="submit" name="submit" value="Login" class="button" onclick="checklogin()" /><!--END LOGIN BUTTON-->

    </div>
    <!--END FOOTER-->

</form>
<div id="errordiv" class="errordiv"></div>
<!--END LOGIN FORM-->

checklogin.php

<?php

 include ('dbconn.php');
       $user = trim($_POST['un']);
        $pass = trim($_POST['pw']);
        $user = mysql_real_escape_string($user);
        $pass = mysql_real_escape_string($pass);
       $result=mysql_query("select Id from login where Username='$user' and Password='$pass'") or die (mysql_error());
      $result= mysql_fetch_assoc($result);
     $num= count ($result);
    echo $num;
?>

如何在 login.php 中获取 $num 的值而不将其显示到 div 并比较 $num 的值并相应地在 errordiv 中显示 errormsg 或如果 $num==2 重定向到另一个页面。

【问题讨论】：

您的处理程序代码应该移动到成功回调。
How to return the response from an AJAX call?的可能重复
是用ajax调用和ajax形式一样吗？？
它们非常相似，因为它们都使用 AJAX。要记住的关键是 AJAX 是异步的，它不等待响应。任何依赖于响应的事情都必须在回调函数中完成。

标签： php javascript ajaxform ajax-forms

【解决方案1】：

更改您的代码以包含更改 div 并提供警报以包含在回调中的代码。

     var request=$("#login-form").ajaxForm(
                 {
                  target:'#errordiv', 
                  success: function (html) {
                      if ($("#errordiv).html() == "1") {
                          $("#errordiv).html("Sorry");
                          alert ("Invalid username or password");  
                      }
                  }
                    }).abort();
                request.submit();

【讨论】：

不工作它将页面重定向到 checklogin.php 并显示 1

【解决方案2】：

也许尝试异步发出检查请求并在 AJAX 回调中处理用户反馈：

JS：

    $(function(){
        $("#login-form").ajaxForm(function(response){
            if(response.count===1){
                $("#errordiv").html("msg you want to show");
            }else if(response.count===2){
                //redirect
            }
        });
    });

php:

<?php
    header("Content-Type: application/json");

    //your database check logic
    $user = trim($_POST['un']);
    $pass = trim($_POST['pw']);
    $user = mysql_real_escape_string($user);
    $pass = mysql_real_escape_string($pass);
    $result=mysql_query("select Id from login where Username='$user' and Password='$pass'") or die (mysql_error());
    $result= mysql_fetch_assoc($result);
    $num= count ($result);

    //and return response in JSON
    echo json_encode(array("count"=>$num));

希望这对你有帮助。

[编辑]

去掉表单提交按钮内联JS函数调用：

onclick="checklogin()"

并将checklogin函数逻辑放到文档就绪回调中，当DOM就绪时初始化表单

【讨论】：

没用。它将页面重定向到 checklogin.php 并显示 {"count":1}
它仍然被重定向到 checklogin.php
$(document).ready(function() { $(function() { ("#login-form").ajaxForm(function(response) { if(response.count ===1 ){ $("#errordiv").innerHTML("对不起，用户名或密码无效"); } else {$("#errordiv").innerHTML("Correct");} }); }); });
尝试去掉最外层的：$(document).ready(function() {})。 $(document).ready(function() {}) 等于 $(function(){})
让我们continue this discussion in chat