Ajax

Ajax传输（文本，页面）

传输文本

<script type="text/javascript">
<!--
function checkUsername(username){
	if(username ==null || username.length<=0){
		return;
	}
	$.ajax({
		url:"resuser.do?op=checkusername",
		data:"username="+username,
		type:"post",//传输方式
		dataType:"json",//传出格式
		//回调函数
		success:function(data){
			$("#result").html(data.msg);
		}
	});
}
//-->
</script>

<td>
<form action="resuser.do" method="post">
	<input type="hidden" name="op" value="reg"/>
	<table>
		<tr>
			<td>用户名：</td>
			<td><input type="text" name="username" onblur="checkUsername(this.value)" ><div id="result"></div></td>
		</tr>
		<tr>
			<td>密码：：</td>
			<td><input type="password" name="pwd"></td>
		</tr>
		<tr>
			<td>验证码:</td>
			<td><input type="text" name="valicode"/><img src="validCode.jsp"/> <a href="">刷新</a></td>
		</tr>	
		<tr>
			<td colspan="2"><input type="submit" value="注册"></td>
		</tr>
	</table>
	${msg }

</form>

servlet处理

private void checkusernameOp(HttpServletRequest request, HttpServletResponse response) throws Exception {
		Resuser resuser = super.parseMap(request, Resuser.class);
		boolean b = resuserBiz.isUsernameExists(resuser);
		Map<String,String> map = new HashMap<String,String>();
		map.put("code", 1+"");
		if(b){
			map.put("msg", "用户名已存在，请更换后重试!");
		}else{
			map.put("msg", "用户名可以使用");
		}
		//通过Ajax传送Json格式的信息
		super.writeJson(map, response);
	}

效果图

页面传输

<script type="text/javascript">
	function loginFun(){
		
		$.ajax({
			url:"resuser.do",
			dataType:"html",
			data:$("#loginForm").serialize(),
			type:"post",
			success:function( data ){
				$("#loginStatusDiv").html(data);
			}
		});
	}
	
	$(function(){
		$.ajax({
			url:"resuser.do?op=isUserLogin",
			dataType:"html",
			type:"post",
			success:function(data){
				$("#loginStatusDiv").html(data);
			}
		});
	});
</script>

传输的页面

<form id="loginForm" action="">
	<input type="hidden" name="op" value="login" />
	 用户名：<input type="text" name="username" /><br /> 
	 密码：<input type="password" name="pwd" /><br />
	 <a href="javascript:void" onclick="loginFun()">快速登录</a> 
	 <a href="resuser.do?op=toReg">注册</a>
</form>
${msg}

servlet处理

private void loginOp(HttpServletRequest request, HttpServletResponse response) throws Exception {
//反射
		Resuser resuser = super.parseMap(request, Resuser.class);
		Resuser result = resuserBiz.login(resuser);
		HttpSession session = request.getSession();
		if(result==null){
			session.setAttribute("msg", "登录失败!");
			response.sendRedirect("loginForm.jsp");
		}else{
			session.setAttribute("resuser", result);
			//登录成功，通过Ajax传送的页面
			request.getRequestDispatcher("/WEB-INF/front/userMan.jsp").forward(request, response);
		}
	}

传送到的页面

欢迎您:${resuser.username}<br/>
&nbsp;&nbsp;<a href="">更改密码</a><br/>
&nbsp;&nbsp;<a href="">查看历史</a><br/>
&nbsp;&nbsp;<a href="">收藏夹</a><br/>
&nbsp;&nbsp;<a href="">地址管理</a><br/>
&nbsp;&nbsp;<a href="">积分</a><br/>
&nbsp;&nbsp;<a href="javascript:void" onclick="logout()">安全退出</a><br/>
<hr/>

<script type="text/javascript">
function logout(){
	$.ajax({
		url:"resuser.do?op=logout",
		type:"post",
		datatype:"html",
		success:function(data){
			$("#loginStatusDiv").html(data);
		}
	});
}
</script>

效果图