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;width:800px;}table{margin:0px auto;}</style>

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

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

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

Ajax基本案例详解之$.ajax的实现相关推荐

Ajax基本案例详解之load的实现
Ajax的load实现: 看这篇之前建议大家去看看前面两篇文章: 1.Ajax基本案例详解之$.ajax的实现 2.Ajax基本案例详解之$.get的实现现在写一下$.load()里面的主要内容: ...
Ajax基本案例详解之$.getjson的实现
Ajax的$.gethson实现: 看这篇之前建议大家去看看前面两篇文章: 1.Ajax基本案例详解之$.ajax的实现 2.Ajax基本案例详解之$.get的实现现在写一下$.getjson里面的 ...
Ajax基本案例详解之$.post的实现
Ajax的post实现: 看这篇之前建议大家去看看前面两篇文章: 1.Ajax基本案例详解之$.ajax的实现 2.Ajax基本案例详解之$.get的实现现在写一下$.post()里面的主要内容: ...
Ajax基本案例详解之$.get的实现
前面我已经写过一篇ajax的$.ajax的实现了,其中html,css,doindex.jsp里面已经详细列出来了,这篇主要写的是$.get()的实现,其中html,css,doindex.jsp都和 ...
ajax常用案例,Ajax和$.ajax使用实例详解(推荐)
实例一(Ajax请求基本创建格式): Ajax练习(GET,不考虑浏览器兼容性) function doRequest() { //不考虑浏览器兼容性问题 var xmlHttp = new XMLH ...
利用jquery操作ajax,利用jquery对ajax操作，详解原理（附代码）
1.jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector ...
thinkphp ajax volist,thinkphp中的volist标签在ajax中操作详解
在一个ThinkPHP的复杂页面(包含volist)中实现volist标签显示Jquery查询结果的返回.本文主要和大家介绍thinkphp 中的volist标签在ajax操作中的特殊性(推荐),需要 ...
$.ajax的async参数,jquery的$.ajax async使用详解
async在jquery ajax中是一个同步参数了,我们下面来给大家介绍在jquery ajax中使用async时碰到的一些问题与方法介绍,希望例子能给各位同学带来一些帮助哦. async默认是tr ...
python代码案例详解-我用Python抓取了7000 多本电子书案例详解
安装安装很简单,只要执行: pip install requests-html 就可以了. 分析页面结构通过浏览器审查元素可以发现这个电子书网站是用 WordPress 搭建的,首页列表元素很简单 ...

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

Ajax基本案例详解之$.ajax的实现相关推荐

最新文章

热门文章