如何學(xué)好java

假設(shè)：
1、你的頁面在Web-Root下，內(nèi)容為：  <div id="showMsg"></div><input type="text" id="userName" />，所用編碼為utf-8
2、你的servlet為：  HelloWorldServlet.java  映射路徑為   servlet/helloWorldServlet
步驟：
1、引入jquery-1.6.4.min.js
2、編寫id為userName的輸入框的點(diǎn)擊觸發(fā)函數(shù)：
      $("#userName").keyup(function(){
            $.ajax({
                  type: "post",
                  url: "servlet/helloWorldServlet?userName="+$(this).val(),
                  dataType: "json",
                  success: function(data){
                        $("#showMsg").html(data.msg);//修改id為showMsg標(biāo)簽的html
                  }, error: function(){
                        alert("請(qǐng)求出錯(cuò)");
                  }
            })
      })
3、后臺(tái)處理接收到的內(nèi)容：
      request.setCharactorEncoding("utf-8");
      String userName = request.getParameter("userName");
      response.setCharactorEncoding("utf-8");
      PringWriter out = response.getWriter();
      out.print("{\"msg\":\"你好~~"+userName+"!\"}");

注意事項(xiàng)：
1、這里的編碼統(tǒng)一為utf-8
2、請(qǐng)求路徑servlet/helloWorldServlet為相對(duì)路徑，因此你的頁面必須在項(xiàng)目的Web-Root下（也就是默認(rèn)的web文件夾下，名字可能因項(xiàng)目配置不同而改變）

網(wǎng)上的 Jquery ajax Demo 大多都是基于php 
很少 有java的 今天就把自己的Demo貼出來 和大家共同學(xué)習(xí) 
現(xiàn)在就  Jquery ajax 的 $.ajax(),$.post(),$.get(); 

首先是  服務(wù)端的Servlet 演示這三個(gè)函數(shù)的用法對(duì)都是用的同一個(gè) 服務(wù)端

 package com.june.servlet;   
  
import javax.servlet.http.HttpServlet;   
import javax.servlet.http.HttpServletResponse;   
import javax.servlet.http.HttpServletRequest;   
import java.io.IOException;   
import java.io.PrintWriter;   
import javax.servlet.ServletException;   
  
public class jqueryAjaxServer extends HttpServlet {   
     public jqueryAjaxServer(){   
         super();   
     }   
     public void doGet(HttpServletRequest request,HttpServletResponse response)   
     throws IOException ,ServletException {   
         response.setContentType("text/html;charset=utf-8");   
         PrintWriter out=response.getWriter();   
         String account=request.getParameter("account");   
         if("iamcrzay".equals(account)){   
             out.print("Sorry,the user is exist");   
         }   
         else{   
             out.print("Congratulation,this accont you can use!!!!");   
         }   
         out.close();   
     }   
     public void doPost(HttpServletRequest request,HttpServletResponse response)   
     throws IOException ,ServletException {   
         this.doGet(request, response);   
     }   
}

下面是WEB.XML 
Xml代碼  
<?xml version="1.0" encoding="UTF-8"?>  
<web-app version="2.5"    
    xmlns="    xmlns:xsi="    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee    
        <servlet>  
       <servlet-name>jqueryAjaxServer</servlet-name>  
       <servlet-class>com.june.servlet.jqueryAjaxServer</servlet-class>  
    </servlet>  
        <servlet-mapping>  
       <servlet-name>jqueryAjaxServer</servlet-name>  
       <url-pattern>/jqueryAjax</url-pattern>  
    </servlet-mapping>  
  <welcome-file-list>  
    <welcome-file>index.jsp</welcome-file>  
  </welcome-file-list>  
</web-app>  
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
 xmlns=" xmlns:xsi=" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
  <servlet>
    <servlet-name>jqueryAjaxServer</servlet-name>
    <servlet-class>com.june.servlet.jqueryAjaxServer</servlet-class>
 </servlet>
        <servlet-mapping>
    <servlet-name>jqueryAjaxServer</servlet-name>
    <url-pattern>/jqueryAjax</url-pattern>
 </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
 
下面是Jsp頁面 
第一個(gè)是 jqueryAjax.jsp  本頁使用的是$.ajax() 
Html代碼  
<%@ page language="java"  pageEncoding="utf-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>     
    <title>jquery ajax</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 src="js/jquery-1.2.6.js" type="text/javascript"></script>  
    <script language="javascript">  
         $(function(){   
               $('.sumbit').click(function(){   
               if($('#account').val().length==0){   
                   $('.hint').text("用戶名不能位空").css({"background-color":"green"});    
               }   
               else{   
               $.ajax({   
                 url:'jqueryAjax',   
                 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>請(qǐng)輸入用戶名 ：</label>  
                <input id="account" name="account" type="text">  
                <input class="sumbit" type="button" value="檢測(cè)">  
                <div class="hint">  
                </div>  
  </body>  
</html>  
<%@ page language="java"  pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  
    <title>jquery ajax</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 src="js/jquery-1.2.6.js" type="text/javascript"></script>
 <script language="javascript">
      $(function(){
            $('.sumbit').click(function(){
            if($('#account').val().length==0){
                $('.hint').text("用戶名不能位空").css({"background-color":"green"}); 
            }
            else{
            $.ajax({
              url:'jqueryAjax',
              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>請(qǐng)輸入用戶名 ：</label>
                <input id="account" name="account" type="text">
                <input class="sumbit" type="button" value="檢測(cè)">
                <div class="hint">
                </div>
  </body>
</html>
 
第二個(gè)用的是  $.post() 
Html代碼  
<%@ page language="java"  pageEncoding="utf-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>     
    <title>jquery ajax</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 src="js/jquery-1.2.6.js" type="text/javascript"></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("jqueryAjax","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>請(qǐng)輸入用戶名 ：</label>  
                <input id="account" name="account" type="text">  
                <input class="sumbit" type="button" value="檢測(cè)">  
                <div class="hint">  
                </div>  
  </body>  
</html>  
<%@ page language="java"  pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  
    <title>jquery ajax</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 src="js/jquery-1.2.6.js" type="text/javascript"></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("jqueryAjax","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>請(qǐng)輸入用戶名 ：</label>
                <input id="account" name="account" type="text">
                <input class="sumbit" type="button" value="檢測(cè)">
                <div class="hint">
                </div>
  </body>
</html>
 
第三個(gè)是用的$.get() 
Html代碼  
<%@ page  pageEncoding="utf-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>      
    <title>jquery get</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 src="js/jquery-1.2.6.js" type="text/javascript"></script>  
    <script type="text/javascript">  
         $(function(){   
                $('.sumbit').click(function(){   
                      if($('#account').val().length==0){   
                         $('.hint').html("用戶名不能位空！！！").css({"color":"#ffoo11","background":"blue"});   
                      }   
                      else{   
                          $.get("jqueryAjax","account="+$('#account').val(),   
                               function(data){   
                                $('.hint').html(data).css({"color":"#ffoo11","background":"green"});   
                          });   
                      }   
                });   
         });   
    </script>  
  
  </head>  
     
  <body>  
        <h3 align="center">jquery AjaX</h3>  
                <hr>  
                <label>請(qǐng)輸入用戶名 ：</label>  
                <input id="account" name="account" type="text">  
                <input class="sumbit" type="button" value="檢測(cè)">  
                <div class="hint">  
                </div>  
  </body>  
</html>  
<%@ page  pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
    <title>jquery get</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 src="js/jquery-1.2.6.js" type="text/javascript"></script>
 <script type="text/javascript">
      $(function(){
             $('.sumbit').click(function(){
                   if($('#account').val().length==0){
                      $('.hint').html("用戶名不能位空！！！").css({"color":"#ffoo11","background":"blue"});
                   }
                   else{
                       $.get("jqueryAjax","account="+$('#account').val(),
                            function(data){
                             $('.hint').html(data).css({"color":"#ffoo11","background":"green"});
                       });
                   }
             });
      });
 </script>
  </head>
  
  <body>
        <h3 align="center">jquery AjaX</h3>
                <hr>
                <label>請(qǐng)輸入用戶名 ：</label>
                <input id="account" name="account" type="text">
                <input class="sumbit" type="button" value="檢測(cè)">
                <div class="hint">
                </div>
  </body>
</html>

http://iamcrzay.iteye.com/blog/237940

更多評(píng)論

更多評(píng)論

xcvcxvv

更多評(píng)論

sdfasf

如何學(xué)好java

jquery ajax servlet

評(píng)論

# re: jquery ajax servlet 回復(fù) 更多評(píng)論

# re: jquery ajax servlet 回復(fù) 更多評(píng)論

# re: jquery ajax servlet 回復(fù) 更多評(píng)論

日歷

常用鏈接

留言簿

隨筆分類

隨筆檔案

文章檔案

新聞檔案

搜索

最新評(píng)論

閱讀排行榜

評(píng)論排行榜