java與前端互動的方式
阿新 • • 發佈：2019-01-30
第一種、通過session存取值
Session會話域，Session在使用者訪問第一次訪問伺服器時建立，伺服器會把長時間沒有活動的Session從伺服器記憶體中清除，此時Session便失效。Tomcat中Session的預設失效時間為20分鐘。另可呼叫Session的invalidate方法使其失效。
jsp部分：
<span style="font-family:SimSun;"><%@ 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>SessionTest</title>
</head>
<body>
<form action="SessionTest" type="get">
<input type="submit" value="提交"></form>
<h2><%=session.getAttribute("username")%></h2>
</body>
</html></span> package com.cool.servlet;
import java.io.IOException;
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 javax.servlet.http.HttpSession;
/**
* Servlet implementation class SessionServ
*/
@WebServlet("/SessionServ")
public class SessionServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SessionServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
HttpSession session=request.getSession();
session.setAttribute("username","吳彥祖"); //重定向回到先前頁面
request.getRequestDispatcher("SessionTest.jsp").forward(request, response);
}
}
jsp部分：
<%@page import="java.util.*" language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!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></title>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
var show=document.getElementById("show");
//readyState==0 未初始化
var httpxml = new XMLHttpRequest();
//readyState==3 正在接受
//readyState==4 接受完畢
httpxml.onreadystatechange = function() {
//alert(httpxml.readyState)
if (httpxml.readyState == 4 && httpxml.status == 200) {
var getStr = httpxml.responseText;//獲得後臺資料
show.innerHTML=getStr;
}
}
//readyState==1 已開啟，為send()做準備
httpxml.open("post","ajaxtest",true);
//readyState==2 已傳送
httpxml.send();
}
}
</script>
</head>
<body>
<h2>ajax資料互動demo</h2>
<input type="button" id="btn"/>
<div id="show"></div>
</body>
</html>
java部分：
package com.cool.servlet;
import java.io.IOException;
import java.io.PrintWriter;
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 com.opensymphony.xwork2.ActionContext;
/**
* Servlet implementation class TestServlet
*/
@WebServlet("/TestServlet")
public class TestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
out.print("ajax互動成功！");
}
}
第三種、json存取多個物件或資料
jsp部分：
<%@page import="java.util.*" language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!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></title>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
var show=document.getElementById("show");
//readyState==0 未初始化
var httpxml = new XMLHttpRequest();
//readyState==3 正在接受
//readyState==4 接受完畢
httpxml.onreadystatechange = function() {
//alert(httpxml.readyState)
if (httpxml.readyState == 4 && httpxml.status == 200) {
var getStr = httpxml.responseText;
var o=JSON.parse(getStr);
var str="";
for(var i=0;i<o.length;i++){
str+="名字:"+o[i].name+"；性別："+o[i].sex+"；年齡："+o[i].age+"</br>";
}
show.innerHTML=str;
}
}
//readyState==1 已開啟，為send()做準備
httpxml.open("post","JsonTest",true);
//readyState==2 已傳送
httpxml.send();
}
}
</script>
</head>
<body>
<h2>json資料互動demo</h2>
<input type="button" id="btn"/>
<div id="show"></div>
</body>
</html>
package com.cool.servlet;
import java.awt.List;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
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 com.cool.bean.Student;
import net.sf.json.JSONArray;
/**
* Servlet implementation class JsonServlet
*/
@WebServlet("/JsonServlet")
public class JsonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public JsonServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ArrayList<Student> list=new ArrayList<Student>();
for(int i=0;i<3;i++){
Student stu=new Student();
stu.setName("Tom");
stu.setSex("男");
stu.setAge(i+10);
list.add(stu);
}
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
out.print(JSONArray.fromObject(list));
out.flush();
out.close();
}
}
第四種、html賦值
總所周知，input有個屬性是hidden，它可以使input隱藏但不佔用空間。因此，我們可以把想要傳遞到後臺的資料儲存到value，讓後臺通過標識獲得這個資料。
jsp部分：
<input type="hidden" name="stu_name" value="我是資料">String stu_name=request.getParameter("stu_name")如果還有其他資料互動的方法，歡迎補充；若文中尚有不妥之處，希望可以得到您的糾正。