AJAX против PHP отправки формы

Question

Первоначально у меня была форма, настроенная как таковая (стили CSS были удалены)

<form name="LoginForm" action="login.php" method="post">

<input name="email" id="email" type="text"></input>

<input name="password" id="password" type="password"></input>

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

, и она работала нормально, и login.php проверил бы учетные записи пользователей.Однако такой подход требовал перенаправления страницы.Я пытаюсь перенести код в AJAX, чтобы я мог запросить данные для входа и остаться на странице.[edit] вот объект AJAX, который я использую

function Ajax(){
    this.xmlhttp=null;  //code below will assign correct request object
    if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
        this.xmlhttp=new XMLHttpRequest();
    }
    else{       // code for IE6, IE5
        this.xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    this.stateChangeFunction=function(){};  //user must reimplement this

    var that=this;
    this.xmlhttp.onreadystatechange=function(){ //executes the appropriate code when the ready state and status are correct
        if (this.readyState==4 && this.status==200){
            that.stateChangeFunction();     
        }
        else{
            dump("Error");
        }
    }
}

, затем у меня есть функция login.js, которую я не очень уверен, как включить, в настоящее время я добавляю ее в событие onclick кнопки submit:

function login(email,password){
    var ajax=new Ajax();

    //ajax.xmlhttp.open("GET","login.php?LoginEmailField="+email+",LoginPasswordField="+password,true);
    //ajax.xmlhttp.send();
}

Вы заметите, как эти две последние строки закомментированы, я не очень уверен, как посылать аргументы в данный момент, но дело в том, что даже с двумя закомментированными весь сайтвсе еще перезагружается.Как правильно использовать AJAX в формах.

Спасибо

Answer 1

Я не сделал достаточно ajax в raw js, чтобы дать здесь урок, так что я собираюсь использовать jquery. Однако все, что я показываю, может быть сделано в необработанном javascript, так что, возможно, кто-то еще будет достаточно любезен, чтобы показать вам необработанную реализацию.

Прежде всего, вы должны использовать POST вместо GET для входа в систему. Во-вторых, как я сказал в своем комментарии, вы должны использовать фактический URL-адрес страницы входа в качестве действия. Таким образом, пользователи, которые по какой-либо причине не имеют JS, могут войти в систему. Лучше всего сделать это, связавшись с формой onSubmit событие.

<form name="LoginForm" action="login.php" method="post">

<input name="email" id="email" type="text"></input>

<input name="password" id="password" type="password"></input>

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

И с JQuery:

function doLogin(event){
  event.preventDefault(); // stop the form from doing its normal post
  var form = $('form[name=LoginForm]');
  // post via ajax instead
  $.ajax({
    url: form.attr('action'), // grab the value of the action attribute "login.php"
    data: form.serialize(), // converts input fields to a query string
    type: 'post',
    dataType: 'text',
    success: function(data){
      /* callback when status is 200
       * you can redirect here ... data is the response from the server, 
       * send the redirect URL in this response
       */
      window.location.href = data;
    },
    error: function(textStatus){
      alert('ERROR');
    }
  });
}

// bind our function to the onSubmit event of the form
$('form[name=LoginForm]').submit(doLogin); 

Затем на стороне сервера вы можете проверить, является ли это запрос на основе ajax:

<?php

 // do your login stuff

 // set $successUrl to the URL you want to redirect to

 // check if its ajax
 if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) 
   && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
 {
   echo $successUrl;
   exit(0);
 }
 else
 {
    // was a non-ajax request - do a normal redirect
    header('Location: '.$successUrl);
 }

Answer 2

Ваш код показывает только HTML.AJAX использует javascript для связи с PHP-скриптом.

Итак, только при просмотре кода js возможна отладка.

Answer 3

Чтобы избежать события по умолчанию, вы должны использовать action='javascript: void(null);' вместо его удаления.