jquery ajax demo

huanhuan1022 · 发表于 2013-2-7 23:34:44

网上的 Jquery ajax Demo 大多都是基于php 很少有java的今天就把自己的Demo贴出来和大家共同学习现在就 Jquery ajax 的 $.ajax(),$.post(),$.get(); 首先是服务端的Servlet 演示这三个函数的用法对都是用的同一个服务端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 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()
<%@ 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()
<%@ 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()
<%@ 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>

		自动登录	找回密码
密码			立即注册

jquery ajax demo

浏览过的版块