Использование литералов шаблона JavaScript `${...}`, похоже, не работает при использовании JSP вместо HTML, оно возвращает ноль в сервлете

Я пытаюсь выполнить AJAX-вызов сервлета со страницы входа в систему, которая спроектирована как страница «.jsp».

Я использую API «fetch» для AJAX (фрагмент кода прикреплен ниже). Этот скрипт написан на той же странице «.jsp» ниже <body>.

/* Function for making Ajax call to login controller */
    const fnAjaxUsersController = function () {
        const userName = document.getElementById('idUserName');
        const userPassWord = document.getElementById('idUserPassWord');

        console.info(userName.value);
        console.info(userPassWord.value);

        const myHeaders = new Headers();
        myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

        const linkToLoginController = `UsersController.do`;

        fetch(linkToLoginController, {      
            method: 'POST'  ,
            headers: myHeaders,         
            body: `uname=${userName.value}&pwd=${userPassWord.value}`            
        })
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`${linkToLoginController} response failed`);
                } else {
                    console.info(response);
                    return response.json()
                }
            })
            .then((jsonData) => {
                console.info(jsonData);
                if (Number.parseInt(jsonData.msgCode) === 0) {
                    fnChangeClassToInValid(userName);
                    fnChangeClassToInValid(userPassWord);

                } else {
                    fnChangeClassToValid(userName);
                    fnChangeClassToValid(userPassWord);

                }
            })
            .catch(err => {
                console.info(`${err.message}`)
            }).finally(() => {
                //console.info(`This block is always executed`);
                /* Normally used for disappearing loading buffer */
            });
    };

Теперь запрос проходит через контроллер сервлетов, но когда я обращаюсь к ним с помощью метода getParameter, он показывает null.

protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        /*
         * Creating user object(No need to validate parameters as they are handled at
         * front end)
         */     
        Users u = new Users((String)request.getParameter("uname"), (String)request.getParameter("pwd"));
        System.out.println(u);

.....

Я предполагаю, что это как-то связано с заголовком Content-Type, так как то же самое работает, если страница входа изменена на обычный «.html».

Ниже приведена форма для принятия пользовательских данных.

    <form id  = "idLoginForm" accept-charset = "utf-8" method='post' action='${pageContext.request.contextPath}/header/header.jsp'>
        <div class = "row mb-3 text-center">
            <div class = "col-sm-4 themed-grid-col"></div>
            <div class = "col-sm-4 themed-grid-col">
                <img class = "mt-4" src = "${pageContext.request.contextPath}/img/80_ISG.png" alt = "" width = "100" height = "57">
            </div>
            <div class = "col-sm-4 themed-grid-col"></div>
        </div>

        <div class = "row mb-3 text-center">
            <div class = "col-sm-4 themed-grid-col"></div>
            <div class = "col-sm-4 themed-grid-col">
                <h1 class = "h3 mb-3 fw-normal">Please sign in</h1>
            </div>
            <div class = "col-sm-4 themed-grid-col"></div>
        </div>

        <div class = "row mb-3 ">
            <div class = "col-sm-4 themed-grid-col"></div>
            <div class = "col-sm-4 themed-grid-col">
                <div class = "form-floating">
                    <input type = "text" class = "form-control" id = "idUserName" placeholder = "Username"
                        aria-describedby = "idUserNameFeedBack" required> <label for = "idUserName">Username</label>
                    <div id = "idUserNameFeedBack" class = "invalid-feedback">
                        Please enter valid user name
                    </div>
                </div>
            </div>
            <div class = "col-sm-4 themed-grid-col"></div>
        </div>

        <div class = "row mb-3 ">
            <div class = "col-sm-4 themed-grid-col"></div>
            <div class = "col-sm-4 themed-grid-col">
                <div class = "form-floating">
                    <input type = "password" class = "form-control" id = "idUserPassWord" placeholder = "Password"
                        aria-describedby = "idUserPassWordFeedBack" required> <label
                        for = "idUserPassWord">Password</label>
                    <div id = "idUserPassWordFeedBack" class = "invalid-feedback">
                        Please enter valid user password
                    </div>
                </div>
            </div>
            <div class = "col-sm-4 themed-grid-col"></div>
        </div>

        <div class = "row mb-3 text-center">
            <div class = "col-sm-4 themed-grid-col"></div>
            <div class = "col-sm-4 themed-grid-col">
                <button id = "idLoginSubmit" class = "btn btn-primary w-100 py-2" type = "submit">Sign in</button>
                <p class = "mt-5 mb-3 text-body-secondary">© 2017–2024</p>
            </div>
            <div class = "col-sm-4 ">
            </div>
        </div>
    </form>

Итак, имя пользователя и пароль заполняются через форму, и этот Ajax-вызов «выборки» запускается через событие щелчка, прикрепленное к кнопке отправки с опцией предотвращения по умолчанию. Я получаю доступ к этим параметрам в сервлете, называемом «UsersController.do».

— 01.08.2024 10:50

Знаешь, что здесь странного. Я попытался напечатать uname=${userName.value}&pwd=${userPassWord.value} после сохранения ethem в строке и отображения нуля

— 01.08.2024 10:56

Я обновил исходный пост

— 01.08.2024 11:00

javascript jsp template-literals

31.07.2024 15:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Я предполагаю, что это как-то связано с заголовком Content-Type, так как то же самое работает, если страница входа изменена на обычный «.html».

Это потому, что синтаксис литералов шаблона JavaScript ${...} также интерпретируется JSP как часть Языка выражений.

У вас есть 2 варианта:

Поместите код JS в отдельный файл JS и укажите на него ссылку <script src = "yourScriptFile.js">. Дополнительным преимуществом является то, что это может повысить производительность, поскольку клиент теперь может запрашивать его асинхронно, а также имеет возможность кэшировать его по различным правилам.
Экранируйте литералы шаблона, которые вы не хотите обрабатывать как часть JSP EL. Вы можете сделать это, поставив обратную косую черту перед $, например \${...}.

На самом деле я получил его после нескольких проб и ошибок и собирался напечатать ответ, но спасибо, чувак, проблема была именно такой, как вы подробно объяснили, и это был мой самый первый опыт работы с переполнением стека. Большое спасибо. Приятного кодирования.

— 01.08.2024 12:58

01.08.2024 12:11