留着当模版用（servlet和ajax）

最新推荐文章于 2024-11-19 10:44:10 发布

原创最新推荐文章于 2024-11-19 10:44:10 发布 · 887 阅读

0 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种使用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">
   
   <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">
   
   <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">
   
   <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>