ПОЛУЧИТЕ запрос перед отправкой формы - PullRequest
Новая
       0

ПОЛУЧИТЕ запрос перед отправкой формы

0 голосов
/ 25 января 2020

У меня есть страница, похожая на то, что ниже. Когда пользователь нажимает кнопку отправки для формы, API должен проверяться, и если запрос GET не выполняется, форма не должна отправляться. Тем не менее, я обнаружил, что запрос GET всегда терпит неудачу, и сообщение об ошибке пустое. Я предполагаю, что страница перенаправляется до того, как запрос GET успеет завершиться sh. 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.11.2.js" integrity="sha256-WMJwNbei5YnfOX5dfgVCS5C4waqvc+/0fV7W2uy3DyU=" crossorigin="anonymous"></script>
</head>
<body>
    <form action="POST_URL" id="primary-form" method="POST">
        <input type="submit" id="submit-button"/>
        <input type="text" name="text-field" id="text-field">
    </form>
    <script>
        $('#primary-form').submit(function(event) {
            $.ajax({
                type:"GET",
                url: // API_URL //,
                success: function(response) {
                    console.log("success");
                    console.log(response);
                },
                error: function(error) {
                    event.preventDefault();
                    console.log("error");
                    console.log(error);
                },
            });
        })
    </script>
</body>
</html>

Я могу изменить javascript следующим образом, и в этом случае запрос GET будет успешным. Тем не менее, я не знаю, как обратить вспять event.preventDefault()

    <script>
        $('#primary-form').submit(function(event) {
            event.preventDefault();
            $.ajax({
                type:"GET",
                url: // API_URL //,
                success: function(response) {
                    console.log("success");
                    console.log(response);
                    // want to perform default action
                },
                error: function(error) {
                    console.log("error");
                    console.log(error);
                },
            });
        })
    </script>

Ответы [ 2 ]

1 голос
/ 25 января 2020

Один из вариантов - сохранить результат вызова ajax и повторить вызов в случае успеха.

В приведенном ниже примере есть переменная успеха, которая устанавливается в true, когда вызов был успешным, и в false, если это не так. 

let success = false;
$('#primary-form').submit(function(event) {
  console.log(success);
  if (!success) {
    event.preventDefault();
    $.ajax({
      type: "GET",
      url: "https://httpbin.org/get",
      success: function(response) {
        success = true;
        //submit the form again
        $("#submit-button").click();
      },
      error: function(error) {
        success = false;
        console.log("error");
        console.log(error);
      },
    });
  }
})
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-1.11.2.js" integrity="sha256-WMJwNbei5YnfOX5dfgVCS5C4waqvc+/0fV7W2uy3DyU=" crossorigin="anonymous"></script>
</head>

<body>
  <form action="POST_URL" id="primary-form" method="POST">
    <input type="submit" id="submit-button" />
    <input type="text" name="text-field" id="text-field">
  </form>
</body>

</html>
1 голос
/ 25 января 2020

Вы можете отменить привязку, а затем вручную отправить вот так. 

success: function(response) {
  ...
  $('#primary-form').off('submit'); // unbind the javascript binding
  event.currentTarget.submit(); // perform drfault functionality
},

Не забудьте отменить привязку, иначе это станет рекурсивным вызовом.

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

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

...