ajax与servlet交互
一、简单例子
1、前端ajax和 后台交互的例子：
前台页面输入信息，使用ajax提交后台，在前端页面不刷新的情况下，完成任务提交，后台返回结果传输到前台。
前端页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="../js/themes/icon.css"/>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div style="width:100%;text-align:center">
<form id="form0" method="post">
<h1>添加学生信息</h1>
学生学号：<input type="text" name="deptno"><br>
学生姓名:<input type="text" name="dname"><br>
家庭地址：<input type="text" name="loc"><br>
<div id="footerDiv">
<table border=0 cellpadding=0 cellspacing=0 width="100%">
<tr style="height:50px;overflow:hidden;">
<td align="center" valign="middle" class="bottom">
<a href="javascript:void(0)" data-options="style:'blue'" onclick="mysave()">保存</a>
</td>
</tr>
</table>
</div>
</form>
</div>
</body>
<script>
//页面加载完成时调用
$(function(){
});
function mysave(){
$.ajax({
url : "${ctx }/guoqing/TestServlet?service=save",
data : $('#form0').serialize(),
type : "post",
success : function(result) {
if(result=="scuess"){
$.messager.alert('提示', "保存并通知成功。", 'info');
}else{
$.messager.alert('提示', "填写失败。", 'info');
}
}
});
}
</script>
</html>
后台servlet
package pers.xiaoma.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;
/**
* 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
//response.getWriter().append("Served at: ").append(request.getContextPath());
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
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
System.out.println("进入");
String service = request.getParameter("service");
if("save".equals(service)) {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String res = "fail";
String deptno = request.getParameter("deptno");
String dname = request.getParameter("dname");
String loc = request.getParameter("loc");
if(deptno!=null&&dname!=null&&loc!=null) {
res="scuess";
}
out.write(res);
out.flush();
out.close();
}
}
}