Форма Javascript отправляется дважды

У меня есть форма входа, которая работает с Firebase auth и подключается к servlet. Проблема в том, что он отправляется дважды. Пожалуйста, проверьте ниже.

код javascript

function toggleSignIn() 
{
    if (firebase.auth().currentUser) 
    {
                    // [START signout]
                    //window.location.href = 'LoadSellPendingApprovals'
                    alert('existing user');
                    firebase.auth().signOut();
                    // [END signout]
                } else {
                    var email = document.getElementById('email').value;
                    var password = document.getElementById('password').value;
                    if (email.length < 4) {
                        alert('Please enter an email address.');
                        return;
                    }

                    if (password.length < 4) {
                        alert('Please enter a password.');
                        return;
                    }

                    // Sign in with email and pass.
                    // [START authwithemail]
                    firebase.auth().signInWithEmailAndPassword(email, password).then(function(firebaseUser) 
                    {
                        var email = firebase.auth().currentUser.email;
                        //alert(email);
                        // console.info(email) contains email
                        const options = {
                            method: 'POST',
                            //url: 'LoginValidator',
                            headers: {
                                // set appropriate headers, assuming json here
                                //"Content-Type": "application/json",
                                 "Content-Type": "application/x-www-form-urlencoded"
                            },
                            // form body, assuming json
                            //body: JSON.stringify(email)
                             body: `email=${email}`
                        }
                        alert(email);
                         url = 'LoginValidator'
                        fetch(url, options)
                            .then(response => response.json())
                            .then(data => console.info(data))
      .                     catch(e => console.error(e))
                            window.location.href = 'LoginValidator'
                    })

                    .catch(function(error) 
                    {
                        // Handle Errors here.
                        var errorCode = error.code;
                        var errorMessage = error.message;
                        // [START_EXCLUDE]
                        if (errorCode === 'auth/wrong-password') 
                        {
                            alert('Wrong password.');
                        } else {
                            alert(errorMessage);
                        }
                        console.info(error);
                        document.getElementById('quickstart-sign-in').disabled = false;
                    // [END_EXCLUDE]
                    });
                //alert('hi');
                // [END authwithemail]
                }
                document.getElementById('quickstart-sign-in').disabled = true;

            }

Моя HTML-форма

<form id = "login-form" class = "form" action = "" method = "post">
                                <div class = "form-group">
                                    <input type = "text" name = "email" id = "email" class = "form-control login-input" placeholder = "username">
                                </div>
                                <div class = "form-group">
                                    <input class = "form-control login-input" type = "password" placeholder = "Password" id = "password" name = "password">
                                    <i id = "open" class = "fa fa-eye fa-2x"></i>
                                    <i id = "closed" class = "fa fa-eye-slash fa-2x"></i>
                                </div>
                                <div class = "form-group">
                                    <input type = "submit" id = "quickstart-sign-in" name = "quickstart-sign-in" class = "form-control btn btn-info btn-md login-bt" value = "Login" onclick = "toggleSignIn()">
                                </div>
                                <div class = "form-group text-center forgot">
                                    <a href = "#">Forgot username</a> / <a href = "#">password?</a>
                                </div>
                            </form>

Ниже мой сервлет (куда отправляется форма), если вам интересно

public class LoginValidator extends HttpServlet {

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");

        String email = request.getParameter("email");
        System.out.println("Printing email: "+email);

        try {

            System.out.println("inside try");

            User user = new User();
            UserRight userRight = new UserRight();

            GsonBuilder gsonBuilder = new GsonBuilder();
            gsonBuilder.registerTypeAdapter(Date.class, new DateTypeDeserializer());
            Gson gson = gsonBuilder.create();

            Retrofit retrofit = new Retrofit.Builder()
                    .baseUrl(BaseURLs.BASE_URL)
                    .addConverterFactory(GsonConverterFactory.create(gson))
                    .build();

            //Get user
            RestEndPointsInterface endPoint = retrofit.create(RestEndPointsInterface.class);
            Call<User> call = endPoint.getUserByEmail(email);
            user = call.execute().body();

            System.out.println(user.getName());

            //Get user rights
            Call<UserRight> userRightCall = endPoint.getUserRightByID(user.getUserRights().getIduserRight());
            userRight = userRightCall.execute().body();

            System.out.println(userRight.getUserRight());

            if (userRight.getUserRight().equals("admin"))
            {
                RequestDispatcher requestDispatcher = request.getRequestDispatcher("LoadSellPendingApprovals");
                requestDispatcher.forward(request, response);
            }
            else
            {
                RequestDispatcher requestDispatcher = request.getRequestDispatcher("index.html");
                requestDispatcher.forward(request, response);
            }


        } catch (Exception e) {
            e.printStackTrace();
        } 
    }

    // <editor-fold defaultstate = "collapsed" desc = "HttpServlet methods. Click on the + sign on the left to edit the code.">
    /**
     * Handles the HTTP <code>GET</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Handles the HTTP <code>POST</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Returns a short description of the servlet.
     *
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}

В моей консоли IDE вывод выглядит следующим образом (вывод печатается servlet)

Printing email: [email protected]
inside try
Printing email: null
inside try
java.lang.IllegalArgumentException: Path parameter "email" value must not be null.
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
160
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это утверждение является виновником:

window.location.href = 'LoginValidator'

Он появляется в этом блоке кода:

fetch(url, options)
   .then(response => response.json())
   .then(data => console.info(data))
   .catch(e => console.error(e))
   window.location.href = 'LoginValidator' // <= HERE

Отступы выглядят так, как будто они являются частью блока catch, но независимо от того, что происходит в остальной части вашей функции, это будет выполнено и отправит дополнительный запрос GET вашему сервлету.

И поскольку ваш сервлет не различает запросы GET и POST (все перенаправляется на processRequest()), вы видите результат, который видите.

Спасибо, да, теперь эта проблема решена. Однако теперь появилась новая проблема. даже если запрос отправляется в servlet, servlet теперь не может повторно отправить запрос в пользовательский интерфейс

PeakGen 16.04.2019 07:55

Я думаю, что сервлет правильно перенаправляет ваш запрос, но, поскольку это делается в рамках запроса AJAX, он не будет перенаправлять вашу страницу (что, похоже, именно то, что вы ожидаете).

Robby Cornelissen 16.04.2019 08:27

мне нужно, чтобы аутентификация с помощью объявления firebase отправляла запрос на сервлет, чтобы он мог отправить его на jsp. Код RequestDispatcher requestDispatcher = request.getRequestDispatcher("/WEB-INF/jsp/mypage.jsp"); в сервлете просто не работает.

PeakGen 16.04.2019 08:31

Это работает, но вы не увидите результата в своем браузере, потому что переадресация запроса выполняется в ответ на запрос AJAX, а не на обычный запрос браузера.

Robby Cornelissen 16.04.2019 08:43

Как я могу это исправить?

PeakGen 16.04.2019 08:46

Вместо переадресации запроса отправьте обратно строку или небольшой фрагмент JSON, содержащий URL-адрес или путь для пересылки. Когда вы получите это в ответ на запрос AJAX, вызовите window.location.href = url или что-то подобное.

Robby Cornelissen 16.04.2019 08:50

Извините, но несколько попыток не увенчались успехом. Я задал еще один вопрос, пожалуйста, помогите, если можете - stackoverflow.com/questions/55702527/…

PeakGen 16.04.2019 09:14

Другие вопросы по теме