18. 無刷新登入

一、用post傳值

  $(document).ready(function(){
    $.post("login.php", function(msg) {
      $("#loginDiv").html(msg);
    });
  });

1.msg為函數傳回值
2.需要一個<div id='loginDiv'></div>
3.$.post()是用post方式傳遞到指定檔案。
4.html()則是替換某元素的內容。

二、login.php內容

<form onsubmit='return false'>
  <table>
    <tr><td>帳號：</td><td><input type='text' id='user_id' size=10></td></tr>
    <tr><td>密碼：</td><td><input type='password' id='passwd' size=10></td></tr>
    <tr><td align='center'>
      <input type='submit' value='登入' onclick='logMein();'>
    </td></tr>
  </table>
</form>

三、logMein()登入

  function logMein() {
    var username = $("#user_id").val();
    var password = $("#passwd").val();
    $.post("login.php", { username: username, password: password }, function(msg) {
      $("#loginDiv").html(msg);
    });
  }

四、login.php登入判斷

$id="admin";
$pass="12345";
if($_POST['username']==$id and $_POST['password']==$pass){
  $_SESSION['login']=true;
  echo "已登入 [<input type='submit' value='登出' onclick='logMeout();'>]";
}else{
  echo  "帳號密碼錯誤，請重新輸入。";
}

五、logMeout()登出

  function logMeout() {
    $.post("login.php", { op: 'logout' }, function(msg) {
      $("#loginDiv").html(msg);
    });
  }

六、login.php登出判斷

if($_POST['op']=='logout'){
  $_SESSION['login']='';
}