JSP页面中JS模板字符串失效及fetch调用Servlet登录接口问题求助

开发者阿泽

2026-4-16

看起来你在JSP页面里用fetch调用Servlet登录接口时碰到了麻烦，我结合JSP和JS的常见坑，给你梳理下问题点和解决思路：

首先，先揪出几个明显的小坑：

JS里的HTML转义字符用错了：你在请求body里写的&是HTML的转义字符，但这是写在JS代码里的，JSP渲染页面时会把它解析成&吗？不对，反而会导致你的请求参数变成uname=xxx&pwd=yyy——也就是第二个参数名被当成了amp;pwd，Servlet那边根本拿不到正确的密码参数！直接改成&就行，JS里不需要HTML转义。
JSP和JS的语法冲突了：这是很多人写JSP内嵌JS都会踩的坑！JSP的EL表达式也是用${}，和JS的模板字符串语法完全一样，JSP会把你JS里的${userName.value}当成EL表达式去解析，而不是JS的变量引用，这直接就导致你的模板字符串失效了，甚至可能页面渲染就报错。

解决语法冲突的办法有三种，选你方便的来：

把这段JS代码抽出来，写成单独的.js文件，然后在JSP里引入它。这样JSP就不会解析JS文件里的${}了，完美避开冲突；
如果你一定要把JS写在JSP页面里，就把JS代码用CDATA块包裹起来，告诉JSP不要解析里面的内容：
```
<script type="text/javascript">
<![CDATA[
    // 你的JS代码写在这里
]]>
</script>
```
暂时放弃模板字符串，改用传统的字符串拼接：'uname=' + userName.value + '&pwd=' + userPassWord.value，虽然麻烦点，但能快速解决冲突问题。

然后再看fetch请求的代码问题：

你在.then((response) => {里后面用了res...，变量名不统一，得改成同一个变量名（比如都用response）；
一定要加请求失败的捕获逻辑，比如用.catch()块，不然网络出错或者Servlet路径不对的时候，你根本不知道哪里出问题；
处理响应的时候，先判断请求是否成功，比如用response.ok或者检查状态码是否为200，再去解析响应体（比如response.json()或者response.text()，看你的Servlet返回的是什么格式）。

给你改好的示例代码，你可以参考下：

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

    console.log(userName.value);
    console.log(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(`请求出错，状态码：${response.status}`);
        }
        // 假设你的Servlet返回JSON格式的结果，比如{success: true, message: "登录成功"}
        return response.json();
    })
    .then((data) => {
        // 处理登录结果
        if (data.success) {
            // 登录成功，比如跳转到主页
            window.location.href = '/home.jsp';
        } else {
            alert('用户名或密码错误，请重试');
        }
    })
    .catch((error) => {
        // 捕获所有请求相关的错误
        console.error('登录请求失败:', error);
        alert('网络异常，请稍后再试');
    });
};

最后再给你几个排查问题的小技巧：

打开浏览器的开发者工具，切到Network标签，触发登录请求后，看看这个POST请求的参数是不是正确，响应状态码是200还是404/500，响应体里返回的是什么内容——这些信息能帮你快速定位是前端参数传错了，还是Servlet路径配错了，还是后端逻辑出问题了；
检查Servlet的映射路径是否和你fetch里的linkToLoginController一致，比如如果你的JSP在/pages/login.jsp，Servlet映射的是/UsersController.do，那相对路径要写成../UsersController.do；
确认Servlet里获取参数的代码是request.getParameter("uname")和request.getParameter("pwd")，和你传的参数名完全对应。

备注：内容来源于stack exchange，提问作者D.Malim