留着当模版用(servlet和ajax)

本文介绍了一种使用JQuery Ajax技术与Servlet进行前后端交互的方法。通过具体的代码示例展示了如何验证用户输入的账号是否已被占用的过程。前端采用JQuery发送Ajax请求,后端通过Servlet接收并处理请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要是servlet和JQuery Ajax技术:


Servlet:


public class JqueryAjaxServer extends HttpServlet {

    protected void service(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out=resp.getWriter();
        String account=req.getParameter("account");
        if("iamcrazy".equals(account)){
               out.print("Sorry,the user is exist");  
        }  
        else{  
            out.print("Congratulation,this accont you can use!!!!");  
        }  
        out.close();
    }
    
}


------------------------------------------------------------------------分割线-----------------------------------------------------------------------

web.xml:


<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <servlet-name>JqueryAjaxServer</servlet-name>
    <servlet-class>serv.JqueryAjaxServer</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>JqueryAjaxServer</servlet-name>
    <url-pattern>/servlet/JqueryAjaxServer</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>


------------------------------------------------------------------------分割线-----------------------------------------------------------------------

JQueryAjax.jsp


<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'JqueryAjax.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script language="javascript">  
         $(function(){  
               $('.sumbit').click(function(){  
               if($('#account').val().length==0){  
                   $('.hint').text("用户名不能位空").css({"background-color":"green"});   
               }  
               else{  
               $.ajax({  
                 url:'servlet/JqueryAjaxServer',  
                 data:{account:$('#account').val()},  
                 error:function(){  
                 alert("error occured!!!");  
                 },  
                 success:function(data){  
                  $('body').append("<div>"+data+"</div>").css("color","red");  
        
                 }  
                   
               });}  
               });  
               });  
                   
         
             
    </script>

  </head>
 
  <body>
                    <h3 align="center">jquery AjaX</h3>  
                <hr>  
                <label>请输入用户名 :</label>  
                <input id="account" name="account" type="text">  
                <input class="sumbit" type="button" value="检测">  
                <div class="hint">  
                </div>
  </body>
</html>

------------------------------------------------------------------------分割线-----------------------------------------------------------------------


JQueryGet.jsp


<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'JqueryGet.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">  
         $(function(){  
                $('.sumbit').click(function(){  
                      if($('#account').val().length==0){  
                         $('.hint').html("用户名不能位空!!!").css({"color":"#ffoo11","background":"blue"});  
                      }  
                      else{  
                          $.get("servlet/JqueryAjaxServer","account="+$('#account').val(),  
                               function(data){  
                                $('.hint').html(data).css({"color":"#ffoo11","background":"green"});  
                          });  
                      }  
                });  
         });  
    </script>

  </head>
 
  <body>
   <h3 align="center">jquery Ajax</h3>  
     <hr>  
     <label>请输入用户名 :</label>  
     <input id="account" name="account" type="text">  
     <input class="sumbit" type="button" value="检测">  
     <div class="hint">  
     </div>
  </body>
</html>


------------------------------------------------------------------------分割线-----------------------------------------------------------------------

JQueryPost.jsp


<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'JqueryPost.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script language="javascript">  
         $(function(){  
             $('.sumbit').click(  
              function(){  
                if($('#account').val().length==0){  
                    $('.hint').text("The account is cant't be null").css({"color":"red","background-color":"yellow"});  
                }  
                else{  
                $.post("servlet/JqueryAjaxServer","account="+$('#account').val(),function(data){  
                   $('.hint').text(data).css({"color":"red","background-color":"yellow"});  
                })  
                }  
             });  
         });             
    </script>  

  </head>
 
  <body>
    <h3 align="center">jquery Ajax</h3>  
     <hr>  
     <label>请输入用户名 :</label>  
     <input id="account" name="account" type="text">  
     <input class="sumbit" type="button" value="检测">  
     <div class="hint">  
     </div>
  </body>
</html>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值