在ajax中使用模板字符串失效的问题解决

cycyong

已于 2023-04-02 21:31:48 修改

阅读量517

点赞数

分类专栏： # 前端文章标签： ajax javascript 前端

于 2023-04-02 15:25:51 首次发布

本文链接：https://blog.csdn.net/cycyong/article/details/129911315

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章讲述了在使用Ajax从后端Controller获取数据时，遇到模板字符串在JSP页面中失效的问题。问题出在模板字符串与EL表达式冲突。通过在模板字符串前添加反斜杠``避免了冲突，成功解决了问题。

摘要由CSDN通过智能技术生成

在ajax中使用模板字符串失效的问题解决

- 问题
- 解决

问题

今天复习Ajax的时候遇到Controller返回数据给前端的时候，使用模板字符串失效

AjaxController.java

    @RequestMapping("/a2")
    @ResponseBody
    public List<User> ajax2(){
        List<User> list = new ArrayList<User>();
        User user1 = new User("小明",1,"男");
        User user2 = new User("小画",41,"男");
        User user3 = new User("小可",3,"男");
        User user4 = new User("小里",2,"女");
        list.add(user1);
        list.add(user2);
        list.add(user3);
        list.add(user4);
        return list;
    }

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/jquery-3.4.1/jquery-3.4.1.min.js"></script>

</head>
<body>
<button id="btn">点击获取数据</button>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    </thead>
    <tbody id="tab">
    </tbody>
</table>
<script>
    const btn = document.querySelector('#btn')
    const tab = document.querySelector('#tab')
    btn.addEventListener('click',function () {
        $.post({
            url:"${pageContext.request.contextPath}/ajax/a2",
            success:function (data,status) {
                console.log(data)
                console.log(data[1].name)
                tab.innerHTML=''
                for(let i=0;i<data.length;i++){
                    // 生成 tr
                    const tr = document.createElement('tr')
                    tr.innerHTML = `
                      <td>${data[i].name}</td>
                      <td>${data[i].age}</td>
                      <td>${data[i].sex}</td>
                                `
                    // 追加元素  父元素.appendChild(子元素)
                    tab.appendChild(tr)
                }
            }
        })
    })
</script>
</body>
</html>

ajax与模板字符串失效问题
点击无反应，且没有任何报错信息。

解决

经过查找资料之后，发现在${}之前必须加上\，否则会与EL表达式冲突。

btn.addEventListener('click',function () {
   $.post({
       url:"${pageContext.request.contextPath}/ajax/a2",
       success:function (data,status) {
           console.log(data)
           console.log(data[1].name)
           tab.innerHTML=''
           for(let i=0;i<data.length;i++){
               // 生成 tr
               const tr = document.createElement('tr')
               tr.innerHTML = `
                 <td>\${data[i].name}</td>
                 <td>\${data[i].age}</td>
                 <td>\${data[i].sex}</td>`     
               // 追加元素  父元素.appendChild(子元素)
               tab.appendChild(tr)
                }
            }
        })
    })

成功解决问题！
ajax与模板字符串

cycyong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
在ajax中使用模板字符串失效的问题解决

今天复习Ajax的时候遇到Controller返回数据给前端的时候，使用模板字符串失效。经过查找资料之后，发现在${}之前必须加上\，否则会与EL表达式冲突。// 追加元素父元素.appendChild(子元素)点击无反应，且没有任何报错信息。
复制链接

扫一扫