利用ajax提交表单，实现数据前端后台数据交互的完整流程演示

该演示需要用到  1 : json.jar(下载)

                              2 : jquery.js(下载)

流程演示：1.点击“登录”按钮，传参到后台

                    2.后台获取数据，处理分析数据，利用JSONObject返回结果(JSONObject需要用到一个 json.jar 即可)

                   3.前端获取后台返回的结果进行判断，然后前端分析该结果，再决定进入后台的最后一个环节（登录是否成功的跳转）

                   4.页面跳转

效果演示：

登录页面：

用户名密码都正确，跳转到index

工程目录树：

具体流程：

1，在WebContent目录下新建一个toLogin.jsp , 用于跳转到login.jsp页面

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

2.Servlet:

@WebServlet("/login.do")  //servlet的名字
public class login extends HttpServlet {

	
	private static final long serialVersionUID = 4306651429943204510L;
	
	public final static String To_login_Page = "0";
	public final static String login = "1";
	public final static String index = "2";

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		String method =  req.getParameter("method");
		switch(method){
		case To_login_Page:
			To_login_Page(req,resp);
			break;
		case login:
			login(req,resp);
			break;
		case index:
			index(req,resp);
			break;
		}
	}

	private void index(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.getRequestDispatcher("WEB-INF/view/index.jsp").forward(req, resp);
		
	}
	
	private void To_login_Page(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.getRequestDispatcher("WEB-INF/view/login.jsp").forward(req, resp);
	}
	
	private void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String username = req.getParameter("username");
		String password = req.getParameter("password");
		System.out.println(username);
		System.out.println(password);
		boolean IsOK = false;
		if(username.equals("admin")&&password.equals("123456")){
			IsOK = true;
		}else{
			IsOK = false;
		}
		try {
			JSONObject json = new JSONObject();
			json.put("IsOK", IsOK);
			PrintWriter out = resp.getWriter();
			out.println(json.toString());
			out.close();
		} catch (JSONException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

3.login.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>








	

		 

		 

		
	

如果实在看不懂，可以尝试下载我的project,去运行，需要说明的是，我建立该工程的环境是tomcat 9

下载地址：http://download.csdn.net/detail/a13432421434/9819642

当然，用ajax提交表单比一般的表单提交代码量多那么一点，至于两种方式提交的区别，还是这里比较有说服力：http://www.cnblogs.com/zhujiabin/p/4901167.html