ajax请求登录及加载数据

利用ajax请求数据

登录可以使用form表单提交数据，也可以使用ajax；页面加载数据目前我一只是直接调用Java类中的方法，这里介绍ajax提交及加载数据

登录

登录页面script代码

<script type="text/javascript">
function login(){
	var tel = $("#tel").val();//登录账号输入框，id为tel
	var password = $("#password").val();
	$.ajax({
		url:"Servlet",//需要跳转的Servlet名称
		data:{tel:tel,password:password,tp:'login'},//需要提交的数据，tp表示需要处理的servlet类型
		success:function(data){//回调函数，data为接收的数据
			if(data=="ok"){
				alert("登录成功");				
				location.href = "Servlet?tp=index";//目标页面路径
			}else{
				alert("登录失败");		
			}
		}
	});	
}
</script>

Servlet代码处理

public class Servlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String type = request.getParameter("tp");
		System.out.println("跳转类型：" + type);
		if (type.equals("login")) {//前台登录
			login(request, response);
		}else if (type.equals("index")) {//前台
			index(request, response);
		}
	}

	private void login(HttpServletRequest request, HttpServletResponse response) {
		String tel = request.getParameter("tel");
		String password="";
		try {
			password = new String(request.getParameter("password").getBytes("ISO-8859-1"), "UTF-8");
			GoodsDao dao = new GoodsDao();
			String username = dao.login(tel, password);
			if(username!=null){
				User user = new User();
				user.setTel(tel);
				user.setPassword(password);
				user.setUsername(username);
				response.setCharacterEncoding("UTF-8");// 设置页面编码格式
				HttpSession s = request.getSession(true);
				s.setAttribute("user", user);
				System.out.println("用户信息存储");
				response.getWriter().write("ok");
			} else { 
				System.out.println("登陆失败");
				response.getWriter().write("error");
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	public void index(HttpServletRequest request, HttpServletResponse response) {
		//用java类连接数据库获取授予需要加载的数据集合List
		GoodsDao dao = new GoodsDao(); 
		ArrayList<Goods> goodslist =  dao.getPlantList(1);
		request.setAttribute("goodslist", goodslist);
		try {
			request.getRequestDispatcher("index.jsp").forward(request, response);
		} catch (ServletException e) {
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

index.jsp 首页数据接收
先加这句话，可加到head之前
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core”%>

<c:forEach items="${goodslist}" var="Goods"  begin="0"  end="2">
	<div class='single-shop'>
    <div class='img'>
 	<img width='150' height='150' src='${Goods.img}'> </div>
	<div class='shop-info'>
    <div class='shop-name'><a href='Servlet?tp=detail&goodsid=${Goods.goodsid}'>${Goods.goodsname}</a></div>
    <div class='shop-grade'>${Goods.grade}</div>
    <div class='shop-price'>￥${Goods.price}</div>
    </div>
    </div>
</c:forEach>