jsp頁面中js程式碼中串插java程式碼
阿新 • • 發佈：2018-12-31
一 說明
儘管現在的趨勢是前後端徹底分離的開發模式，但是熟悉一下以前的一些內容也未嘗不可。
二 具體實現
事實上這個是非常容易實現的，因為在.jsp頁面裡面寫java程式碼本身就很簡單，下面就是所有例子。
1. User類
package cn.smileyan.domain; public class User { private String username; private String password; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } }
2 servlet類
package cn.smileyan.servlet; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.smileyan.domain.User; /** * Servlet implementation class HelloServlet */ public class HelloServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setAttribute("Hello", "Hello I am servlet"); User user = new User(); user.setPassword("<h1>I am password!</h1>"); user.setUsername("<h2>I am username!</h2>"); request.setAttribute("user", user); RequestDispatcher rs = request.getRequestDispatcher("hello.jsp"); rs.forward(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
3. jsp程式碼
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <a href="HelloServlet">點我進行測試</a> </body> </html>
hello.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="cn.smileyan.domain.User" %>
<%
User user = (User)request.getAttribute("user");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title>js中穿插EL表示式例子</title>
<script>
$(document).ready(function(){
$("#me").click(function(){
$("#me").html("<%=user.getUsername() %>");
});
$("#password").click(function(){
$("#password").html("<%=user.getPassword() %> ");
});
});
</script>
</head>
<body>
<h3 id="me">click me and I will be changed to username</h3>
<h3 id="password">click me and I will be changed to password </h3>
</body>
</html>
當然最後記得配置Servlet
<servlet>
<servlet-name>HelloServlet</servlet-name>
<display-name>HelloServlet</display-name>
<description></description>
<servlet-class>cn.smileyan.servlet.HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloServlet</servlet-name>
<url-pattern>/HelloServlet</url-pattern>
</servlet-mapping>大功告成！點選前端介面就可以看到前端輸出的後臺的User類的物件的資訊。
需要注意的地方：
1. hello.jsp中要添上 import="cn.smileyan.domain.User 也就是在jsp的頂部匯入這個類
2. 在前面新增
<%
User user = (User)request.getAttribute("user");
%> 來讀取後臺傳過來的資料。
大功告成！