122
社区成员
发帖
与我相关
我的任务
分享个人技术博客---Gson解析JSON和实现JSP与Servlet数据通信
| 这个作业属于哪个课程 | 2302软件工程社区 |
|---|---|
| 这个作业要求在哪里 | 软件工程实践总结&个人技术博客 |
| 这个作业的目标 | 个人技术总结 |
| 其他参考文献 | 《构建之法》 |
目录
- 一、技术简介
- 二、技术介绍
- 2.1 json处理，首先使用Gson对json数据进行处理，这分为手动和自动的处理方式
- 2.2 JSP与servlet的数据通信
一、技术简介
JSP 与 PHP、ASP、ASP.NET 等语言类似，运行在服务端的语言。
比较特别的是，JSP能够直接运行Java代码，JSP能够很好地编写和修改HTML代码，并且JSP页面可以与处理业务逻辑的 Servlet 一起使用。
相较于JavaScript，JSP能够与服务器进行连接，并提供复杂的服务。因此在编写世界游泳锦标赛网站时，我们选择使用JSP进行编写。
这主要的难点在于json的处理和JSP与Servlet的数据通信。
二、技术介绍
2.1 json处理，首先使用Gson对json数据进行处理，这分为手动和自动的处理方式
- 手动，通过手动建立类来帮助gson函数方法解析json
//运动员类
package util;
public class Athlete2 {
private String country;
private String firstname;
private String lastname;
private String gender;
private String dob;
public Athlete2() {
}
public String getPreferredLastName() {
return this.lastname;
}
public void setPreferredLastName(String preferredLastName) {
this.lastname = preferredLastName;
}
public String getPreferredFirstName() {
return this.firstname;
}
public void setPreferredFirstName(String preferredFirstName) {
this.firstname = preferredFirstName;
}
public String getCountryName() {
return this.country;
}
public void setCountryName(String countryName) {
this.country = countryName;
}
public String getDOB() {
return this.dob;
}
public void setDOB(String DOB) {
this.dob = DOB;
}
public String getGender() {
return this.gender;
}
public void setGender(String gender) {
this.gender = gender;
}
}
//
// 运动员类，细化json运动员信息
package util;
public class AthleteClass {
private String fullName = null;
private int prank = 0;
private int srank = 0;
private int frank = 0;
private String pscore = null;
private String sscore = null;
private String fscore = null;
public AthleteClass() {
}
public void AthletesClass(String name, int rank1, int rank2, int rank3, String score1, String score2, String score3) {
this.fullName = name;
this.prank = rank1;
this.srank = rank2;
this.frank = rank3;
this.pscore = score1;
this.sscore = score2;
this.fscore = score3;
}
public void setFrank(int frank) {
this.frank = frank;
}
public void setFscore(String fscore) {
this.fscore = fscore;
}
public void setFullName(String fullName) {
this.fullName = fullName;
}
public void setPrank(int prank) {
this.prank = prank;
}
public void setPscore(String pscore) {
this.pscore = pscore;
}
public void setSrank(int srank) {
this.srank = srank;
}
public void setSscore(String sscore) {
this.sscore = sscore;
}
public int getFrank() {
return this.frank;
}
public int getPrank() {
return this.prank;
}
public int getSrank() {
return this.srank;
}
public String getFullName() {
return this.fullName;
}
public String getFscore() {
return this.fscore;
}
public String getPscore() {
return this.pscore;
}
public String getSscore() {
return this.sscore;
}
}
- 自动，Gson也可以自动对json进行解析
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
DataSourceImpl data = new DataSourceImpl();
List<Athlete2> list = data.getAthletes(this.getServletContext().getRealPath("/WEB-INF/data/athletes.json"));
req.setAttribute("athlete", list);
req.getRequestDispatcher("athlete.jsp").forward(req, resp);
}
2.2 JSP与servlet的数据通信
- JSP能够直接运行Java代码，但是部分后端数据无法传输到JSP前端中
<% List<Athlete2> lists = (List)request.getAttribute("athlete");%>
<div>
<table class="table-athlete">
<tr>
<th>Country</th>
<th>Athlete</th>
<th>Gender</th>
<th>DOB</th>
</tr>
<% for(Athlete2 athlete : lists){ %>
<%="<tr>" %>
<%="<td>" +athlete.getCountryName() + "</td>"%>
<%="<td>" +athlete.getPreferredLastName() + " " + athlete.getPreferredFirstName() + "</td>"%>
<%="<td>" +athlete.getGender() + "</td>"%>
<%="<td>" +athlete.getDOB() + "</td>"%>
<%="</tr>" %>
<% } %>
</table>
</div>
- 在这里我们查阅了许多资料，不断寻找方法，才发现要实现前后端通信，需要修改web.xml文件
- 我们需要在web,xml文件中写入Servlet对应的映射和路径
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
<servlet>
<servlet-name>Athlete</servlet-name>
<servlet-class>web.AthleteServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>Result</servlet-name>
<servlet-class>web.ResultServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>Schedule</servlet-name>
<servlet-class>web.ScheduleServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Athlete</servlet-name>
<url-pattern>/Athlete</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Result</servlet-name>
<url-pattern>/Result</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Schedule</servlet-name>
<url-pattern>/Schedule</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
- 这样，我们的servlet就可以实现前后端数据通信
- AthleteServlet
//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by FernFlower decompiler)
//
package web;
import core.DataSourceImpl;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import util.Athlete2;
@WebServlet(
name = "AthleteServlet",
value = {"/ath"}
)
public class AthleteServlet extends HttpServlet {
public AthleteServlet() {
}
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
DataSourceImpl data = new DataSourceImpl();
List<Athlete2> list = data.getAthletes(this.getServletContext().getRealPath("/WEB-INF/data/athletes.json"));
req.setAttribute("athlete", list);
req.getRequestDispatcher("athlete.jsp").forward(req, resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}
- 这样子我们就实现了servlet向JSP传输数据，那如果要实现 JSP向后端传输数据呢？
- 我们可以使用form来实现
<div class="action">
<table>
<tr>
<input class="btn" type="button" onclick="window.location.href='index.jsp';" value="OVERVIEW">
</tr>
<tr>
<input class="btn" type="button" onclick="window.location.href='schedule.jsp';" value="SCHEDULE">
</tr>
<tr>
<input class="btn" type="button" onclick="window.location.href='';" value="THE MOMENT">
</tr>
<tr>
<form action="Result">
<input class="btn" type="submit" value="RESULTS">
</form>
</tr>
<tr>
<form action="Athlete">
<input class="btn" type="submit" value="ATHLETES">
</form>
</tr>
</table>
</div>
好了，这样前后端的数据通信就实现了。
...全文
请发表友善的回复…
发表回复
