Ajax基本案例详解之$.getjson的实现
【摘要】 Ajax的$.gethson实现： 看这篇之前建议大家去看看前面两篇文章： 最近在学Ajax，现在来分享一下基本ajax案例： 先来说说$.ajax的情况：首先我们先来创建个index.jsp，在index.jsp里面我们写一个<script>标签，主要是引用jquery的环境，没有的童鞋可以来这里下载一下。 那么接下来大家看代码吧！<...
Ajax的$.gethson实现：
看这篇之前建议大家去看看前面两篇文章：
最近在学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");
}
这样就可以实现验证邮箱是否可用！！！
前面我已经写过一篇ajax的$.ajax的实现了，其中html，css，doindex.jsp里面已经详细列出来了，这篇主要写的是$.get()的实现，其中html，css，doindex.jsp都和 里面的一样，所以这里就不重复的写了，在这里只写一下<script>里面的内容就行：
$.get(
"doindex.jsp",
"email="+$("#email").val(),
function(result){
if($.trim(result)=="true"){
$("#semail").html("<span style='color:red;padding-left:5px;'>该邮箱不可用</span>");
}else {
$("#semail").html("<span style='color:green;padding-left:5px;'>该邮箱可用</span>");
}
}
);
大家直接套上前面的方法运行就可以了！
现在写一下$.getjson里面的主要内容：
$.getJSON("doindex.jsp",{email:$("#email").val()},function(data){
alert(data.msg);
$("#semail").html(data.msg);
});
然后在看看doindex.jsp里面的内容：
String email = request.getParameter("email");
if("2451999120@qq.com".equals(email)){
out.print("{\"flag\":true,\"msg\":\"<font color='red'>该邮箱已注册！</font>\"}");
}else{
out.print("{\"flag\":false,\"msg\":\"<font color='green'>可以使用！</font>\"}");
}
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）