Ajax基本案例详解之$.ajax的实现
生活随笔
收集整理的這篇文章主要介紹了
Ajax基本案例详解之$.ajax的实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
??? 最近在學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 $.postString email=request.getParameter("email");if(email.equals("2451999120@qq.com")){out.print("true");}else{out.print("false");}
??????? 這樣就可以實現驗證郵箱是否可用！！！
總結
以上是生活随笔為你收集整理的Ajax基本案例详解之$.ajax的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电脑IP地址配置错误怎么办？
- 下一篇： Ajax基本案例详解之$.get的实现