最近在迭代一个前后端不分离的老项目，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获取后端数据并渲染页面了~~
