最近在学Ajax,现在来分享一下基本ajax案例:
先来说说$.ajax的情况:
首先我们先来创建个index.jsp,在index.jsp里面我们写一个<script>标签,主要是引用jquery的环境,没有的童鞋可以来这里下载一下。
那么接下来大家看代码吧!
<script>里面包含的代码
<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; width: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"); }
这样就可以实现验证邮箱是否可用!!!