İstismar AJAX, PHP, ve işlem formları

3 Cevap php

Ben basit bir giriş formu işlemek için AJAX kullanmak istiyorum. Ben oldukça kolay olacağını düşündüm, ama ben sadece tüm çalışma alınamıyor.

index.php

<html>
<head>
<title>AJAX Login</title>
<script type="text/javscript">
var XMLHttpRequestObject = false;

if(window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
    	XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    	}

    function logIn() {
    	if(XMLHttpRequestObject) {
    		var obj = document.getElementById("show");
    		XMLHttpRequestObject.open("GET", "login.php");

    		XMLHttpRequestObject.onreadystatechange = function() {
    			if(XMLHttpRequestObject.readyState == 4
    			   && XMLHttpRequestObject.status == 200) {
    					obj.innerHtml = XMLHttpRequestObject.responseText;
    				}
    			}

    			XMLHttpRequestObject.send(null);
    		}
    	}

</script>
</head>
<body>
<form action="" method="post">
<table>
    <tr>
        <td>Username:</td>
        <td><input type="username" name="username" /></td>
    </tr>
    <tr>
        <td>Password:</td>
        <td><input type="password" name="password" \ /></td>
    </tr>
    <tr>
        <td colspan="2"><input type="submit" name="submit" value="login" onclick="logIn();" /></td>
    </tr>
</table>
</form>
<div id="show">should go here</div>
</body>
</html>

login.php

<?php
$username = "andrew";
$password = "andrew";

if($_POST['username'] != "") {
    if($_POST['password'] != "") {
    	if(($_POST['username'] == $username) && ($_POST['password'] == $password)) {
    		echo "Login Success!";
    		}
    		else {
    			echo "Login Failure!";
    			}
    		}
    		else {
    			echo "You didn't enter a password";
    			}
    		}
    		else {
    			echo "You didn't enter a username";
    			}
?>

Ben "Giriş" düğmesine tıkladığınızda, hiçbir şey olmuyor. (

3 Cevap

Eğer bu form üzerinde oturum tıkladığınızda kaynak URL geri gönderir. Eğer gerçekten bu ya için olay işleyicisi değiştirmek gerekir Bunu önlemek için:

function logIn() {
  ...
  return false;
}

Alternatif forma gönderme işleyicisi yerine teslim düğmesini tıklatma işleyicisi onu yapabilirsiniz.

İkincisi, AJAX çapraz tarayıcı yapmak için yaklaşık 6 geri dönüş koşulları, sadece XmlHttpRequest gerekir. Bkz Getting Started with AJAX and the XMLHttpRequest Object.

Tüm dürüstlük, AJAX için bir yardımcı kütüphanesi olmadan bunu yapıyor düşünün yolu yoktur. Benim tercihi kod bu gibi bakıyor biter bu durumda jQuery olduğunu:

<form id="loginform" method="post">
<table>
  <tr>
    <td>Username:</td>
    <td><input type="username" id="username" name="username" /></td>
  </tr>
  <tr>
    <td>Password:</td>
    <td><input type="password" id="password" name="password" \ /></td>
  </tr>
  <tr>
    <td colspan="2"><input type="button" id="login" value="Login"/></td>
  </tr>
</table>
</form>

ile:

<script type="text/javascript">
$(function() {
  $("#login").click(function() {
    $("#show").load("login.php", {
      username: $("#username").val(),
      password: $("#password").val()
    }, function() {
      $("#loginform").hide(); // for example
    });
  });
});
</script>

Sizin PHP komut dosyası bir HTTP POST isteği olarak geçirilecek değişkenleri bekliyor, ancak XMLHTTPRequest bir GET isteği yapıyor.

Bunun yerine, .send() yöntemi için POST verileri geçirerek olmalıdır - Ayrıca XMLHttpRequestObject.send(null); yapıyoruz.

Diğerleri jQuery çok basit bu tür bir şey yapacak gibi bir JavaScript kütüphanesini kullanarak, işaret gibi.

Her yerde login () işlevini çağırarak değil. Büyük olasılıkla, bu formun onsubmit olay haline aittir. Unutma

return false;

sonunda.

etiketler