将变量从php传递回jquery?

时间:2013-03-25 11:30:41

标签: php jquery html5

我正在尝试将我的登录页面转换为使用html并使用jquery和php来获取和处理结果,原因是如果我想要移动我的项目然后我就在那里。

我遇到的问题是将变量从php传递回jquery以同时显示。

我的例子 的index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Auth Demo 2</title>
    <script src="jquery/jquery-1.7.2.min.js"></script>
    <script src="main.js"></script>
</head>

<body onload="handleLogin()">

        <form id="loginForm">

            <label for="email">Email:</label>
            <input type="text" name="email" id="email" value="" placeholder="email" />



            <label for="password">Password:</label>
            <input type="password" name="password" id="password" value="" placeholder="Password" />


        <input type="submit" value="Login" id="submitButton">
        </form>

</body>
</html> 

main.js

    function handleLogin(){

        var form = $("#loginForm");
        var u = $("#email", form).val();
        var p = $("#password", form).val();

        if(u!= '' && p!= '') {
             $.post("http://www.mysite.co.uk/login.php",{ 
                        email:$('#email', form).val(),
                        password:$('#password', form).val(),
                        rand:Math.random() 
                      } ,function(data)
                          {
                             if(data=='yes') //if correct login detail
                             {
                                 alert( "Request success: ");
                             }
                             else
                             {  
                                  //add reason in alert box here
                                  alert ("failed reason")
                              }
                   });
        } else {
                    alert( "Username/password empty");
               }
         return false;//not to post the  form physically

     }

的login.php

<?//get the posted values
require_once("../backend/functions.php");
dbconn(true);


if ($_POST["email"] && $_POST["password"]) {
    $password = passhash($_POST["password"]);

    if (!empty($_POST["email"]) && !empty($_POST["password"])) {
        $res = SQL_Query_exec("SELECT id, password, secret, status, enabled FROM users WHERE email = " . sqlesc($_POST["email"]) . "");
        $row = mysql_fetch_assoc($res);

        if ( ! $row || $row["password"] != $password )
            $message = "Wrong password";
        elseif ($row["status"] == "pending")
            $message = "Account Pending";
        elseif ($row["enabled"] == "no")
            $message = "Account Suspened";
    } else
        $message = "No Username/password added";

    if (!$message){
        logincookie($row["id"], $row["password"], $row["secret"]);
        if (!empty($_POST["returnto"])) {
            header("Refresh: 0; url=" . $_POST["returnto"]);
            die();
        }
        else {
            echo  "yes";
            die();
        }
    }else{
        echo $message;
    }
}

logoutcookie();

正如您所看到的,当登录失败时,我有多种原因想要传回警报框。什么是最好的方式来实现这个目标

4 个答案:

答案 0 :(得分:1)

只提醒数据

  if(data=='yes') //if correct login detail
  {
      alert( "Request success: ");
  } 
  else{
        alert (data)
   }

但是我建议将响应作为JSON .....

if(u!= '' && p!= '') {
     $.post("http://www.mysite.co.uk/login.php",{ 
               email:$('#email', form).val(),
               password:$('#password', form).val(),
               rand:Math.random() 
         } ,function(data)
             {
                if(data=='yes') //if correct login detail
                {
                    alert( "Request success: ");
                }
                else
                {                                                      //add reason in alert box here
                    alert (data)
                 }
           });

  } else {
         alert( "Username/password empty");
  }

     return false;//not to post the  form physically
  }

答案 1 :(得分:1)

尝试使用JSON;

JSON.stringify(your_object, null, 2);

使用此方法在PHP中捕获POST以获取数组:http://www.php.net/manual/en/function.json-decode.php

$data = json_decode($_POST);

完成PHP后,回显一个数组数据的编码JSON字符串:http://www.php.net/manual/en/function.json-encode.php

echo json_encode($return_data);

在jQuery中,进行测试;

console.log(data);
console.log(data.yes);

答案 2 :(得分:0)

执行此操作的最佳方法是使用$ .ajax()并使用“XML”类型。然后让login.php返回一个XML文件,其中包含您需要的任何参数(用户ID,错误消息,如果有的话,用户名等)。然后,您可以使用jQuery解析XML文件以立即使用这些变量。无论如何,处理后端错误更安全。

答案 3 :(得分:0)

function handleLogin(){

    var form = $("#loginForm");
    var u = $("#email", form).val();
    var p = $("#password", form).val();

    if(u!= '' && p!= '') {

        jQuery.ajax({
             type: "POST", 
             url: "http://www.mysite.co.uk/login.php", 
             data: 'username='+u+'&password='+p+'&rand='+Math.random(),
             complete: function(data){

                 if(data.responseText == 'yes'){
                    alert( "Request success: ");
                 }else{
                    alert( "failed: ");
                 }

         });

    } else {

        alert( "Username/password empty"); 

    }

     return false;//not to post the  form physically

 }