ajax 传值方式data.push({name:'a',value:'a'});

网上的 Jquery ajax Demo 大多都是基于php
很少 有java的 今天就把自己的Demo贴出来 和大家共同学习

先用html写个例子：myajax.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>ajax_load.html</title>
</head>
<body>
<h2 style="color:#FF0000">我是李云，Jquery很好用！</h2>
</body>
</html>

执行ajax的页面：useAjax.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script  type="text/javascript" src="jquery-142min.js" ></script>
 </head>
 <script language="javascript">
    $(function(){
   $.ajax({
  url:"myajax.html",
  async:false,
  success:function(data)
  {
           //alert(data);
     $("p").html(data);
  }
   });
 });
</script>
 <body>
    <p></p>
 </body>
</html>

$.get()方法实现

<script type="text/javascript">
    $(function(){
    $.get("myajax.html",function(data){
   $("p").html(data);
  });
 });
</script>

$.post()方法实现

 <script type="text/javascript">
    $(function(){
    $.post("myajax.html",function(data){
   $("p").html(data);
  });
 });
</script>
现在就  Jquery ajax 的 $.ajax(),$.post(),$.get();

首先是  服务端的Servlet 演示这三个函数的用法对都是用的同一个 服务端
Java代码 
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);  
     }  
} 

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="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>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="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>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页面
第一个是 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>请输入用户名 ：</label> 
                <input id="account" name="account" type="text"> 
                <input class="sumbit" type="button" value="检测"> 
                <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>请输入用户名 ：</label>
                <input id="account" name="account" type="text">
                <input class="sumbit" type="button" value="检测">
                <div class="hint">
                </div>
  </body>
</html>

第二个用的是  $.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>请输入用户名 ：</label> 
                <input id="account" name="account" type="text"> 
                <input class="sumbit" type="button" value="检测"> 
                <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>请输入用户名 ：</label>
                <input id="account" name="account" type="text">
                <input class="sumbit" type="button" value="检测">
                <div class="hint">
                </div>
  </body>
</html>

第三个是用的$.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>请输入用户名 ：</label> 
                <input id="account" name="account" type="text"> 
                <input class="sumbit" type="button" value="检测"> 
                <div class="hint"> 
                </div> 
  </body> 
</html>  

$(
	function(){
		// Get a reference to the content div (into which we will load content).
		var jContent = $( "#content" );
						
		// Hook up link click events to load content.
		$( "a" ).click(
			function( objEvent ){
				var jLink = $( this );
				
				// Clear status list.
				$( "#ajax-status" ).empty();
				
				// Launch AJAX request.
				$.ajax(
					{
						// The link we are accessing.
						url: jLink.attr( "href" ),
						
						// The type of request.
						type: "get",
						
						// The type of data that is getting returned.
						dataType: "html",
						
						error: function(){
							ShowStatus( "AJAX - error()" );
							
							// Load the content in to the page.
							jContent.html( "<p>Page Not Found!!</p>" );
						},
						
						beforeSend: function(){
							ShowStatus( "AJAX - beforeSend()" );
						},
						
						complete: function(){
							ShowStatus( "AJAX - complete()" );
						},
						
						success: function( strData ){
							ShowStatus( "AJAX - success()" );
							
							// Load the content in to the page.
							jContent.html( strData );
						}
					}							
					);
				
				// Prevent default click.
				return( false );					
			}
			);
		
	}
	);
每一天都要行动，在前进中寻求卓越。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wshsdlau/p/2518275.html