JQuery 无法解析 JSP EL答案

【问题标题】：JQuery not able to parse JSP ELJQuery 无法解析 JSP EL
【发布时间】：2015-10-15 14:36:48
【问题描述】：

我的 JQuery process.js 文件无法解析 JSP EL 表达式。我只是想在我的 JSP 中显示一个 List 对象。如果我只使用 ${students} 对象，它可以正常工作并显示所有学生，但如果我尝试使用 JQuery 显示它，它只会在浏览器中显示 ${students} 字符串。我在web.xml 中禁用了脚本，并使用 EL 显示数据。

还有其他方法可以解决吗？

浏览器输出：

Hello World from JQuery!

From JSP:  
[Student{id=1, name=Jack}, Student{id=2, name=Jill}]

From JQuery:
${students}

home.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/process.js"></script>
    </head>
    <body>
        <div id="mydiv"></div>
        <h2>From JSP: <p/> ${students}</h2>
        <h3>From JQuery: <div id="studentDiv"></div></h3>
    </body>
</html>

process.js

$(document).ready(function () {
    //static message
    var msg = "Hello World from JQuery!";
    $("#mydiv").text(msg);

    //dynamic message
    var students = '${students}';
    $("#studentDiv").text(students);
});

HomePageController.java

@WebServlet(name = "HomePageController", urlPatterns = {"/homePageController.do"})
public class HomePageController extends BaseController {

    private static final String VIEW_NAME = "/jsp/home.jsp";

    @Override
    public void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Student> students = getAllStudents();
        request.setAttribute("students", students);
        request.getServletContext().getRequestDispatcher(VIEW_NAME).forward(request, response);
    }

    private List<Student> getAllStudents() {
        List<Student> students = new ArrayList<>();
        Student student1 = new Student(1, "Jack");
        Student student2 = new Student(2, "Jill");
        students.add(student1);
        students.add(student2);
        System.out.println("students = " + students);
        return students;
    }
}

BaseController.java

public abstract class BaseController extends HttpServlet {

    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        processRequest(request, response);
    }

    public abstract void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException;

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- Disable scripting -->
    <jsp-config>
        <jsp-property-group>
            <url-pattern>*.jsp</url-pattern>
            <scripting-invalid>true</scripting-invalid>
        </jsp-property-group>
    </jsp-config>

    <session-config>
        <session-timeout>30</session-timeout>
    </session-config>

    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

</web-app>

【问题讨论】：

.js 文件不会由服务器端进程执行，因此任何服务器端变量都将简单地呈现为纯文本。如果您需要这种行为，您需要将${students} 输出放置在可以正确呈现的位置，例如在HTML 中的data 属性中，然后通过JS 通过DOM 读取它。
我认为你错过了一个核心概念。 JSP EL 在服务器端执行并生成发送到浏览器的 html / javascript。 jQuery 在客户端浏览器上运行

标签： javascript java jquery jsp el

【解决方案1】：

EL 表达式仅由 JspServlet (*.jsp) 和 FacesServlet (*.xhtml) 评估。但是，.js 文件默认不由这些 servlet 处理，而是由容器的内置默认 servlet 处理。这不是 jQuery 的错。这只是你的错。

一个快速技巧是将*.js URL 模式添加到JspServlet 映射。在找出容器的内置名称JspServlet（位于Tomcat 中并克隆jsp）后，将以下条目添加到您的webapp 的web.xml：

<servlet-mapping>
    <servlet-name>jsp</servlet-name>
    <url-pattern>*.js</url-pattern>
</servlet-mapping>

替代方案是：

将其重构为 Web 服务调用并使用 $.getJSON()。
将其打印为 HTML5 data 属性并使用 $.data()。
在包含所需脚本之前将其打印为 JSP 中的内联脚本变量。

【讨论】：

谢谢！通过使用上面建议的第二种替代方法，它使用 HTML5 data 属性和使用 $.data() jquery 方法