Проблемы с XMLHttpRequest и PHP

Question

Я довольно новичок в JavaScript и PHP, поэтому надеюсь, что эта проблема не такая сложная, как мне кажется. Я пытаюсь отправить данные из формы в файл PHP с использованием XMLHttpRequest, а затем отобразить вывод PHP как предупреждение. Вот HTML и JavaScript:

<form onSubmit="password_Check()"> 
     <input type="password" size="40" name="password" id="pass"> 
     <input type="submit" value="Go"> 
</form> 

<script type="text/javascript"> 
function password_Check() { 
    var url = "test.php"; 
    var pass = $("#pass").val(); 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", url+"?pass="+pass, true); 
    xhr.onreadystatechange = function() { 
     if(xhr.readyState == 4 && xhr.status == 200) { 
     alert(xhr.responseText); 
     } 
    } 
} 
</script> 

А вот PHP:

<?php 
    $pass = $_GET["pass"]; 
    echo "The password is $pass! We've done it!"; 
?> 

Я пробовал все виды способов сделать это, как $ .post, $ .get, $ .ajax, и xhr с использованием POST. Но я не могу заставить это работать. Теперь он просто добавляет «? Пароль = (что бы я ни положил)» в конец текущего URL-адреса, который ничего не делает, но показывает, что он что-то делает.

Answer 1

В своем коде вы отсутствует часть send, где вы фактически вызываете запрос. Если вы не запускаете запрос, то нет смысла прослушивать события, которые прослушивают состояние.

сделать это как

xhr.onreadystatechange = function() { 
    if(xhr.readyState == 4 && xhr.status == 200) { 
    alert(xhr.responseText); 
    } 
} 
xhr.send(); 

Также в вашем вопросе вы упоминаете о Jquery Ajax, с $.get ваш код может быть столь же просто, как

$("#form1").on("submit",function(e){ 

    e.preventDefault(); 
    var url = "test.php?pass=" + $("#pass").val(); 
    $.get(url,function(data){ 
     //handle data here 
    }); 

}); 

Answer 2

Вы забыли выполнить запрос. xhr.send():

Кроме того, обратите внимание, что, поскольку у вас возникли XMLHTTPRequest, вам необходимо изменить поведение по умолчанию (который форма будет представлен) с помощью .preventDefault();

<form id="form1"> 
     <input type="password" size="40" name="password" id="pass"> 
     <input type="submit" value="Go"> 
</form> 

<script type="text/javascript"> 
// handle the submission event 
document.getElementById('form1').addEventListener('submit', function(e){ 
    e.preventDefault(); // prevent from submitting 
    var url = "test.php"; 
    var pass = document.getElementById('pass').value; // be faithful!, just use plain javascript 

    var xhr = new XMLHttpRequest(); 
    var params = '?pass='+pass; 
    xhr.open("GET", url+params, true); 
    xhr.onreadystatechange = function() { 
     if(xhr.readyState == 4 && xhr.status == 200) { 
     alert(xhr.responseText); 
     } 
    } 
    xhr.send(); // send it 
}); 
</script> 

Answer 3

Если вы используете JQuery, то лучше использовать JQuery-х ajax вместо xhr!

Также, если вы отправляете пароль, лучше не отправлять его с помощью запроса GET, поскольку он будет отображаться в URL-адресе. Вместо этого всегда используйте POST при работе с паролями! сторона

Клиент: сторона

<form action="/index.php" id="myform" method="post"> 
     <input type="password" size="40" name="password" id="pass"> 
     <input type="submit" value="Go"> 
</form> 

<script type="text/javascript"> 
    $('#myform').on('submit', function() { 
     $.ajax({ 
     type: $(this).attr('method'), //Taking for the form attribute 
     url: $(this).attr('action'), 
     data: $(this).serialize(), //Takes care of all input fields in the form! No need to pass one by one! 
     success: function(response) { 
      if(response == 'success') { 
      window.location.href = '/url-to-goto'; //Set your redirect url here 
      } 
      else { 
      //Handle invalid password here 
      alert(response); 
      } 
     } 
     }); 

     return false; 
    }); 
</script> 

Сервер:

<?php 

//If you are handling password, better to put it in the post body instead of url for security reasons 
if($_SERVER['REQUEST_METHOD'] == 'POST') { 
    //Check password here 
    if(isset($_POST['password']) && $_POST['password'] == '123') { 
    die('success'); //successful! redirect user! 
    } 

    die('Invalid password!'); 
} 
?> 

Надежда, которая поможет вам лучше понять!