2013-07-18 157 views
0

你好 我知道這個問題已經提出過,但沒有人像我一樣做過AJAX操作標準。我是新手AJAX和jQueryPHP和AJAX登錄表格

我在這裏的問題是,我不確定js函數「ajaxPostCallManip()」達到「login.php」!

我已經做了幾個警報()秒,但沒有顯示了,請幫助

HTML代碼

<link rel="stylesheet" type="text/css" href="jQuery-Files/jquery.mobile-1.3.1.css"/> 
    <script type="text/javascript" src="jQuery-Files/jquery-2.0.2.js"></script> 
    <script type="text/javascript" src="jQuery-Files/jquery.mobile-1.3.1.js"></script> 
    <script type="text/javascript" src="js/ajax.js"></script> 

<div data-role="page" id="loginDialog"> 
    <header data-role="header"> 
     <h3 style="margin-left: auto; margin-right: auto;">Login or <a href="#regpage"  
      data-transition="flip">Register</a></h3> 
    </header> 
    <div data-role="content"> 
     <form method="POST" action="" onsubmit="check_login(); return false;"> 
      <fieldset data-role="contolgroup">        
        <div data-role="fieldcontain">      
         <label for="login_username">Username</label> 
         <input type="text" name="login_username" id="login_username" 
           placeholder="username" /> 

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

         <div style="margin: auto; text-align: center;"> 
          <label for="login_submit" class="ui-hidden-accessible">     
            Submit</label> 
          <button onclick="this.form.submit()" value="Submit" 
            data-inline="true"></button> 
          <span class="error" id="login_err" name="login_err" 
           style="display: none; font-size: 12px; 
           text-align: center;">status</span> 
         </div>     
        </div> 
      </fieldset> 
     </form> 
    </div> 
</div> 

JS代碼

 
    // AJAX Call handler using method="POST" 
    function ajaxPostCallManip(str, url, toDoFunc) 
    { 
     var xmlhttp;    // Request variable 
     if(window.XMLHttpRequest)   // For modern browsers 
     xmlhttp = new XMLHttpRequest; 
     else     // For old browsers 
     xmlhttp = new ActiveXOBject("Microsoft.XMLHttp"); 

     xmlhttp.onreadystatechange=toDoFunc; 
     xmlhttp.open("POST", url, true); 
     xmlhttp.send(str); 
    } 

    function check_login() 
    { 
     // Construct the POST variables [username, password] 
     var postStr = "username=" + $('#login_username').val() + "&" 
      + "password=" + $('#login_pwd').val(); 

     // Call the general purpose AJAX Handler Function 
     ajaxPostCallManip(postStr, "login.php", function() 
     // toDoFunc to be performed when server response is ready 
     { 
     if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
     { 
      alert(xmlhttp.responseText);   
      switch(xmlhttp.responseText) 
      { 
       case "1": 
       $('#login_err').css({'color':'green','display':'block'}) 
             .html('Successful Login');     
       break; 

      case "2": 
        $('#login_err').css({'color':'red','display':'block'}) 
             .html('incorrect username/password') 
       break; 

      case "3": 
       $('#login_err').css({'color':'red','display':'block'}) 
             .html('please fill in all fields') 
       break; 
      } 
     } 
     }); 
    } 

PHP代碼

<?php 
    include('dbManip.php'); 

    echo '<script> alert("Inside login.php"); </script>'; 

    $username = $_POST['username']; 
    $password = $_POST['password']; 

    // Just to check that the POST variables arrived safely 
    echo "<script> alert('username = ' + $username); </script>";  


    if(!empty($username) && !empty($password)) 
    { 
     // Fetch data from database 
     $query = " 
      SELECT username,password 
      FROM users 
      WHERE username = '$username' and password = '$password'; 
     "; 

     // Execute query 
     $res = mysql_query($query); 

     // If there is a match for the credentials entered with the database 
     if(mysql_num_rows($res) == 1) 
     { 
      // Fetch information and double check credentials 
      while($row = mysql_fetch_assoc($res)) 
      { 
       $db_username = $row['username']; 
       $db_password = $row['password']; 
      } 

      // Compare results with user input 
      if($username == $db_username && $password == $db_password) 
      { 
       // Credentials are correct - response = 1 
       echo '1'; 
      } 
      else 
      { 
       // Credentials are incorrect - response = 2 
       echo '2'; 
      } 
     } 
     else 
     { 
      // There is no match in the database 
      // Credentials are incorrect - response = 2 
      echo '2'; 
     } 
    } 
    else 
    { 
     // If one or both fields are empty - response = 3 
     echo '3'; 
    } 
?> 
+6

我建議你使用jQuery庫,並降低你的AJAX調用的一行代碼移除表單標籤method="post"action=""屬性? – DevlshOne

+0

我當時也是一樣的大聲笑 – Misters

+1

在你看看jQuery之後,我建議你也看看[PDO](http://php.net/manual/en/book.pdo.php),因爲這段代碼容易受到攻擊SQL注入。 [Here's](http://forums.devshed.com/php-faqs-and-stickies-167/how-to-program-a-basic-but-secure-login-system-using-891201.html)一個漂亮的體面的登錄教程 – Phas1c

回答

0

首先,你需要重寫的提交按鈕:

<button type="Submit" value="Submit"data-inline="true"></button> 

其次,移動從函數的變量,將使其成爲一個全球性:

​​
+0

感謝您澄清@liding,但它似乎並沒有解決我的問題。我仍然不確定它成功登錄login.php – Roshdy

0

我認爲你需要重寫這一行代碼:

<form method="POST" action="" onsubmit="check_login(); return false;"> 

並將其更改爲:

<form method="POST" action="login.php" onsubmit="check_login(); return false;"> 

確保將login.php保存在與您的html文件相同的文件夾中。

0

因爲你定義它在Ajax調用