Переменная остается пустой при использовании AJAX при отправке запроса в файл php - PullRequest
Новая
       0

Переменная остается пустой при использовании AJAX при отправке запроса в файл php

0 голосов
/ 28 декабря 2018

У меня есть форма, в которой я выполняю некоторую обработку ошибок AJAX перед отправкой формы, просто чтобы улучшить взаимодействие с пользователем.Моя проблема в том, что переменная $user_password, кажется, остается пустой в течение всего процесса, поэтому обработка ошибок не имеет значения.

В следующем коде первая функция keyup предназначена для проверки, превышает ли пароль минимальную длину, а вторая - для проверки соответствия паролей: 

$(document).ready(function() {
    $("input[name=user_password]").keyup(function(){    
        var user_password = $("input[name=user_password]").val();
        //data to server...
        $.post("../server/hub.php", {
            //POST name and variable... 
            check_password: user_password
            //places fetched information...
        }, function(data, status) {
            $("#user_password").html(data);
        });
    });
});


$(document).ready(function() {

    $("input[name=user_password_2]").keyup(function(){
        var user_password = $("input[name=user_password]").val();
        var user_password_2 = $("input[name=user_password_2]").val();
        //data to server...
        $.post("../server/hub.php", {
            //POST name and variable... 
            password_match: user_password,
            password_match_2: user_password_2
            //places fetched information...
        }, function(data, status) {
            $("#user_password_2").html(data);
        });
    });

});

Переменныеперенаправлен в php-файл, где фактически выполняется обработка ошибок: 

if (isset($_POST['check_password'])) {
    $user_password = $_POST['check_password'];

    echo $user_password;

    if ($user_password == "") {
        echo "";
    } elseif (strlen($user_password) < 6) {
        echo "Password must contain at least six characters!";
    } else {
        echo "You are good to go!";
    }
}

if (isset($_POST['password_match'])) {
    $user_password = $_POST['password_match'];
    $user_password_2 = $_POST['password_match_2'];

    if ($user_password_2 == "") {
        echo "";
    } elseif ($user_password !== $user_password_2) {
        echo "Sorry, passwords do not match!";
    } else {
        echo "You are good to go!";
    }
}

Хотя данные, возвращенные в html-файл, остаются пустыми, а вывод $user_password не дает результата.

Вотhtml-сегмент: 

<form action="../server/register.php" method="POST">
                        <div class="input_table">                           
                            <table>
                                <thead>
                                    <tr>
                                        <th><h1>Register to LIMS</h1></th>
                                    </tr>
                                </thead>
                                <tbody>

                                    <tr>
                                        <td><input type="password" name="user_password" placeholder="Select Password"><p id="user_password"></p></td>
                                    </tr>
                                    <tr>
                                        <td><input type="password" name="user_password_2" placeholder="Repeat Password"><p id="user_password_2"></p></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <button type="submit" name="user_register" class="button_1">Register</button>
                        <button type="button" class="button_3">Cancel</button>              
                    </form>

Может кто-нибудь объяснить, почему это происходит?

Ответы [ 3 ]

0 голосов
/ 28 декабря 2018

roelofco - Поскольку вы не получаете ошибку 404, кажется, что нет никакой проблемы с путем к файлу PHP.Несколько вещей, которые вы можете попробовать.

  1. Пожалуйста, попробуйте добавить следующий код в начало hub.php 

    <?php 
echo "Entering the Ajax File";
var_dump($_POST);

  2. $("input[name=user_password]").val(); - Это не хороший способ получить значение.В документе HTML может быть несколько элементов / тегов с одинаковыми именами.Так что либо вы можете изменить атрибут имени в html на id и изменить jquery соответственно, ИЛИ использовать $("input[name=user_password]").eq(0).val(); - Теперь мы говорим JS, чтобы получить первый элемент с именем user_password.

  3. Обратите внимание, что Ajax-вызовы на keyup очень дороги.Попробуйте сделать это в форме отправки.Проверка на стороне клиента в порядке во время keyup.

  4. Использование нескольких готовых событий DOM замедлит работу сайта.Всегда идеально хранить весь код в одной готовой функции DOM.

  5. jquery post имеет методы сбоя и всегда обратного вызова.Попробуйте использовать это, чтобы получить ошибки.В вашем случае это будет так.

    $.post("../server/hub.php", {
    //POST name and variable... 
    password_match: user_password,
    password_match_2: user_password_2
    //places fetched information...
}, function(data, status) {
    $("#user_password_2").html(data);
}).fail(function() {
    alert( "Some error" );
}).always(function() {
    alert( "Ajax finished" );
});`
0 голосов
/ 28 декабря 2018

Таким образом, ответ на проблему довольно прост, но очень легко пропустить.Опять же, это показывает, почему хорошая практика кодирования является обязательной для написания успешного сайта.Мне кажется, что в этом случае name=user_password был повторен где-то еще в коде, поэтому при вызове с использованием: 

var user_password = $("input[name=user_password]").val();

он ссылался на ввод в другой части кода, а не на ввод, который я пыталсяприменить код к.Просто изменив name=user_password на name=user_password_1 в html-коде, а затем изменив код ajax: 

$(document).ready(function() {
    $("input[name=user_password_1]").keyup(function(){  
        var user_password_1 = $("input[name=user_password_1]").val();
        //data to server...
        $.post("../server/hub.php", {
            //POST name and variable...
            check_password: user_password_1
            //places fetched information...
        }, function(data, status) {
            $("#user_password_1").html(data);
        });
    });


    $("input[name=user_password_2]").keyup(function(){
        var user_password_1 = $("input[name=user_password_1]").val();
        var user_password_2 = $("input[name=user_password_2]").val();
        //data to server...
        $.post("../server/hub.php", {
            //POST name and variable... 
            password_match_1: user_password_1,
            password_match_2: user_password_2
            //places fetched information...
        }, function(data, status) {
            $("#user_password_2").html(data);
        });
    });

});

Код работает отлично.Хотя, по моему мнению, это была идиотская ошибка, я все же считаю важным опубликовать ее в качестве ответа, чтобы другие люди могли извлечь пользу из двойной проверки своего кода на наличие глупых ошибок, подобных этой.

0 голосов
/ 28 декабря 2018

Я смог заставить ваш код работать так, как вы его написали.

Я создал пустую страницу для html под названием test.php: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="../server/register.php" method="POST">

  <div class="input_table">
    <table>
      <thead>
        <tr>
          <th><h1>Register to LIMS</h1></th>
        </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="password" name="user_password" placeholder="Select Password"><p id="user_password"></p></td>
          </tr>
          <tr>
            <td><input type="password" name="user_password_2" placeholder="Repeat Password"><p id="user_password_2"></p></td>
          </tr>
        </tbody>
    </table>
  </div>

  <button type="submit" name="user_register" class="button_1">Register</button>
  <button type="button" class="button_3">Cancel</button>

</form>

<script>

$(document).ready(function() {
  $("input[name=user_password]").keyup(function(){
      var user_password = $("input[name=user_password]").val();
      //console.log('password 1 key up'); //Check for key up.. It works
      //data to server...
      $.post("hub.php", {
          //POST name and variable...
          check_password: user_password
          //places fetched information...
      }, function(data, status) {
          console.log(data); //Check for your data.
          $("#user_password").html(data); //Data was displayed in div.
      });
  });
});


$(document).ready(function() {

  $("input[name=user_password_2]").keyup(function(){
      var user_password = $("input[name=user_password]").val();
      var user_password_2 = $("input[name=user_password_2]").val();
      //data to server...
      $.post("hub.php", {
          //POST name and variable...
          password_match: user_password,
          password_match_2: user_password_2
          //places fetched information...
      }, function(data, status) {
          $("#user_password_2").html(data);
      });
  });

});

</script>

Обратите внимание, что я используюhub.php как URL для AJAX.

Другое дело, что я использовал Jquery 3.1.1 и загрузил библиотеку перед формой.

Я также обернул ваш код jquery в теги <script>.

И страницу hub.php, которую я поместил в ту же папку, что и test.php: 

<?php

echo 'I made it.';  //Test to see if you landed on the page.

if (isset($_POST['check_password'])) {
    $user_password = $_POST['check_password'];

    echo $user_password;

    if ($user_password == "") {
        echo "";
    } elseif (strlen($user_password) < 6) {
        echo "Password must contain at least six characters!";
    } else {
        echo "You are good to go!";
    }
}

if (isset($_POST['password_match'])) {
    $user_password = $_POST['password_match'];
    $user_password_2 = $_POST['password_match_2'];

    if ($user_password_2 == "") {
        echo "";
    } elseif ($user_password !== $user_password_2) {
        echo "Sorry, passwords do not match!";
    } else {
        echo "You are good to go!";
    }
}


?>

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

Я проверил это, и оно работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...