原理:通过ajax调用HttpServlet来实现前后端数据交互
1.前端方面,通过ajax实现调用(别忘记引用jQuery)
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
name:<input id="div_name" name="name" type="text"/>
age:<input id="div_age" name="age" type="text"/>
sex:<input id="div_sex" name="sex" type="text"/>
<input id="sub_1" type="button" value="提交"/>
</body>
<script type="text/javascript">
function postTest(){
var data={
"name":$("#div_name").val(),
"age":$("#div_age").val(),
"sex":$("#div_sex").val()
}
$.ajax({
type: "post",
url: "http://localhost:8080/zscg/myser",
data: data,
cache: false,
async : false,
// dataType: "JSON",
success: function (data ,textStatus, jqXHR)
{
changeData(data);
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
}
});
}
$("#sub_1").bind("click",function(){
postTest();
});
function changeData(da){
$("#div_name").val(da.name);
$("#div_age").val(da.age);
$("#div_sex").val(da.sex);
}
</script>
</html>
2.后台通过继承HTTPservlet实现后台调用
即运行一下servlet获得地址放到前台的url中
package ser;
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;
/**
* Servlet implementation class myser
*/
@WebServlet("/myser")
public class myser extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public myser() {
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
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String rep = "xfgxf";
rep="{\"name\":\"小王\",\"age\":22,\"sex\":\"男\"}";
//doGet(request, response);
response.setCharacterEncoding("utf-8");
response.setContentType("application/json; charset=utf-8");
response.getWriter().write(rep);
String name=request.getParameter("name");
String age=request.getParameter("age");
String sex=request.getParameter("sex");
System.out.println(name+""+age+""+sex);
}
}