JQuery ajax Demo
网上的 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()
<%@ pagepageEncoding="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>
欢迎大家拍砖~~~~~~~~~~~~~~~~~~~~~~~~~~~
页:
[1]