Ajax基本案例详解之$.ajax的实现
2023-09-14 08:57:40 时间
最近在学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-hook拦截全局ajax请求操作
- ajax发送异步请求四个步骤,AJAX的异步请求的四个步骤[通俗易懂]
- 关于Android大数据收集,埋点统计的详细讲解以及案例代码分析附github代码
- linux 恢复 raid5数据,Raid5数据恢复案例(raid阵列数据恢复方法)「建议收藏」
- 案例分享——低压电力线载波通信模组(借助电源线实现远距离数据传输、宽压输入、波特率范围广、应用场景多样化)
- 「案例」打造工业紧固件行业SRM采购业务协同平台,实现高效协同采购
- .ajax get 写法,原生Ajax写法(GET)
- Scratch3.0——助力新进程序员理解程序(案例七、音乐舞蹈)
- Python小案例(九)PySpark读写数据
- 大数据技术之辅助排序和二次排序案例(GroupingComparator)详解大数据
- Spark 实时计算整合案例详解大数据
- jQuery Ajax 实例 ($.ajax、$.post、$.get)详解编程语言
- AJAX下载和显示远程图片(案例实战)
- 案例:MySQL 表空间出现满状态解决方案(mysql表空间满了)
- 实践Linux 案例精通:让你满足实践!(linux案例)
- 从MySQL分批传输至客户端AJAX解决方案(ajax分批mysql)
- MySQL与Ajax 精彩无穷的开发实现(ajax与mysql)
- 异步Ajax与Oracle数据库实现无缝连接(ajax连接oracle)
- Redis问题解决一个案例研究(redis问题案例)
- 案例实践丨最优化算法的前世今生
- Ajax长连接项目案例