您的位置：首页 > 其它

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

2017-04-12 22:50 295 查看

    最近在学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");
}

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航