网上的 Jquery ajax Demo 大多都是基于php

很少 有java的 今天就把自己的Demo贴出来 和大家共同学习

现在就  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代码

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">

jqueryAjaxServer

com.june.servlet.jqueryAjaxServer

jqueryAjaxServer

/jqueryAjax

index.jsp

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">

jqueryAjaxServer

com.june.servlet.jqueryAjaxServer

jqueryAjaxServer

/jqueryAjax

index.jsp

下面是Jsp页面

第一个是 jqueryAjax.jsp  本页使用的是$.ajax()

Html代码

jquery ajax

$(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("

").css("color","red");

}

});}

});

});

jquery AjaX

---

请输入用户名 ：

jquery ajax

$(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("

").css("color","red");

}

});}

});

});

jquery AjaX

---

请输入用户名 ：

第二个用的是  $.post()

Html代码

jquery ajax

$(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"});

})

}

});

});

jquery Ajax

---

请输入用户名 ：

jquery ajax

$(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"});

})

}

});

});

jquery Ajax

---

请输入用户名 ：

第三个是用的$.get()

Html代码

jquery get

$(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"});

});

}

});

});

jquery AjaX

---

请输入用户名 ：