最近在迭代一个前后端不分离的老项目，jsp语法对于一个前端新手总是显得不是很友好的，毕竟写html和js代码多了以后，在更改jsp代码的时候会有一些不适应，比如在ajax获取请求并且使用jquery和ES6渲染页面的时候，jsp的EL模板和ES6的拼接字符串都用到了${}这个表达式：

<script>

    $.ajax({

        //请求方式

        type : "POST",

        //请求的媒体类型

        header:"Access-Control-Allow-Origin:*",

        contentType: "application/json;charset=UTF-8",

        //请求地址

        url : "credit/new",

        //数据，json字符串

        data : "data",

        //请求成功

        success : function(result) {

            var _result = JSON.parse(result);

            // console.log("........",_result);

            var arr = _result.data;

            // console.log("arr",arr);

            console.log(date)
            for (var i = 0;i < 4;i++){
                console.log("4ge",arr[i])
                var date = new Date(arr[i].publishDate).toLocaleString().slice(0,10).replace(/\//g,"-").replace("-","0");
                var year = date.slice(0,4);
                var day = date.slice(4)
                console.log("shijian",year)
                console.log("tianshu",day)
                var node = $(`
                    <a href="${home}credit_detail/?${'${arr[i].id}'}" target="_blank" class="lh_credit_news_link_box">
                        <div class="lh_credit_news_link_date">
                            <p class="lh_credit_link_date_day">${'${day}'}</p>
                            <p class="lh_credit_link_date_year">${'${year}'}</p>
                        </div>
                        <div class="lh_credit_news_link_content">
                            <p class="lh_credit_news_link_content_title">${'${arr[i].bt}'}</p>
                            <p class="lh_credit_news_link_content_summary">${'${arr[i].zhy}'}</p>
                        </div>
                    </a>
                `)
                node.appendTo('#lh_credit_news_link');
            }
        },
        //请求失败，包含具体的错误信息
        error : function(e){
            console.log(e.status);
            console.log(e.responseText);
        }
    })

</script>

这一段代码本身我分离出一个单独的js去写的，在解析这段代码时出现了问题：

var node = $(`
                    <a href="${home}credit_detail/?${arr[i].id}" target="_blank" class="lh_credit_news_link_box">
                        <div class="lh_credit_news_link_date">
                            <p class="lh_credit_link_date_day">${day}</p>
                            <p class="lh_credit_link_date_year">${year}</p>
                        </div>
                        <div class="lh_credit_news_link_content">
                            <p class="lh_credit_news_link_content_title">${arr[i].bt}</p>
                            <p class="lh_credit_news_link_content_summary">${arr[i].zhy}</p>
                        </div>
                    </a>
                `)

因为${home}是el表达式而其他的,其他的是ES6的模板语法，遇到这个问题怎么解决呢？

直接将这个ajax的代码写在jsp文件中，并将要插入的节点中的es6模板语法作为字符串传给el模板！

var node = $(`
                    <a href="${home}credit_detail/?${'${arr[i].id}'}" target="_blank" class="lh_credit_news_link_box">
                        <div class="lh_credit_news_link_date">
                            <p class="lh_credit_link_date_day">${'${day}'}</p>
                            <p class="lh_credit_link_date_year">${'${year}'}</p>
                        </div>
                        <div class="lh_credit_news_link_content">
                            <p class="lh_credit_news_link_content_title">${'${arr[i].bt}'}</p>
                            <p class="lh_credit_news_link_content_summary">${'${arr[i].zhy}'}</p>
                        </div>
                    </a>
                `)

这样就可以在jsp文件中完美使用ajax获取后端数据并渲染页面了~~