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

你的名字 2023-10-08 23:26 74阅读 0赞

#### 在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与模板字符串失效问题][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与模板字符串][ajax 1]

[ajax]: https://img-blog.csdnimg.cn/9540746518bc40cbb6c31d3665a3c90f.png
[ajax 1]: https://img-blog.csdnimg.cn/975d69fbceb841d0b58d09df3f9f394f.png