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  $.post
  String email=request.getParameter("email");
  if(email.equals("2451999120@qq.com")){
    out.print("true");
  }else{
    out.print("false");
  }


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


相关文章
QGS
|
XML 前端开发 JavaScript
手搭手Ajax经典基础案例省市联动
手搭手Ajax经典基础案例省市联动
QGS
51 1
|
前端开发 JavaScript
$.ajax GET请求案例
$.ajax GET请求案例
54 0
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
61 10
React技术栈-react使用的Ajax请求库实战案例
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
37 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
18 0
|
JSON 前端开发 Java
Java Web应用开发案例|使用AJAX实现省市区三级联动效果
使用AJAX实现省市区三级联动效果,即选择省后,该省下的所有市数据动态填充到下拉框中,区县数据也会根据市的变化而动态填充该市下的区县数据。
167 0
Java Web应用开发案例|使用AJAX实现省市区三级联动效果
|
前端开发
ajax实战案例:$.when .done .fail实现多接口数据回调
ajax实战案例:$.when .done .fail实现多接口数据回调
46 0
|
前端开发 JavaScript
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
118 0
|
前端开发
Echarts实战案例代码(21):front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案
Echarts实战案例代码(21):front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案
94 0
|
前端开发 JavaScript
ajax Fileupload多文件上传实现案例
ajax Fileupload多文件上传实现案例
151 1