Ajax基本案例详解之$.ajax的实现

最近在学Ajax，现在来分享一下基本ajax案例：

先来说说$.ajax的情况：

首先我们先来创建个index.jsp，在index.jsp里面我们写一个<script>标签，主要是引用jquery的环境，没有的童鞋可以来这里下载一下。

那么接下来大家看代码吧！

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#email").focus(function(){
				$("#semail").html("<span style='color:green;padding-left:5px;'>邮箱格式为：2451999120@qq.com</span>");
			});
			$("#email").blur(function(){
			
			//ajax实现
				  $.ajax({
					url:"doindex.jsp",
					data:"email="+$("#email").val(),
					type:"post",
					success:function(result){
						if($.trim(result)=="true"){
							$("#semail").html("<span style='color:red;padding-left:5px;'>该邮箱不可用</span>");
						}else if($.trim(result)=="false"){
							$("#semail").html("<span style='color:green;padding-left:5px;'>该邮箱可用</span>");
						}
					},error:function(){
						alert("请求失败，请联系管理员！");
					}
				}); 
				
				
			});
		});
	</script>

为了一目了然，我把html的代码也亮一下吧：

<body>
  <div id="div1">
		<table>
			<tr>
				<td>注册邮箱：</td>
				<td><input type="text" name="email" id="email" />*</td>
				<td id="semail"></td>
			</tr>
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="username" id="username" />*</td>
				<td id="sname"></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="text" name="pwd" id="pwd" />*</td>
				<td id="spwd"></td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td><input type="text" name="repwd" id="repwd" />*</td>
				<td id="srepwd"></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="button" id="btn"
					value="注册" />
				</td>
			</tr>
		</table>
	</div>
  </body>

再来亮一下我的CSS里面的代码：

<style type="text/css">
		#div1{
			padding:10px;
			border:1px solid black;
			margin-top:50px;
			800px;
		}
		table{
			margin:0px auto;
		}
	</style>

最后我的处理页面是doindex.jsp,我把源码贴上来大家看看

//$.ajax  $.get  $.post
	String email=request.getParameter("email");
	if(email.equals("2451999120@qq.com")){
		out.print("true");
	}else{
		out.print("false");
	}

这样就可以实现验证邮箱是否可用！！！