`
iamcrzay
  • 浏览: 57618 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

JQuery ajax Demo

AjaxjQueryCSSjsonServlet 
阅读更多
网上的 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>


欢迎大家拍砖  ~~~~~~~~~~~~~~~~~~~~~~~~~~~
分享到：
评论
12 楼 Beaterman2009 2009-08-20  
可以把整个压缩包挂上去么，谢谢LZ
11 楼 kjj 2009-08-08  
phenom 写道
查了不少，就是没发现有和struts的，比如
List names=....................得到是一个集合；
request.setAttribute("names",names);
那可以直接像上面的
success:function(data){  
                  $('body').append("<div>"+data+"</div>").css("color","red");   }  

好像JS不能这样处理，那就要换个XML。JSON来存储，不知可否提供些例子，

牛人，ajax是通过url 获取的，这个页面上是list，得在服务端构造js对象js才认识的！！
10 楼 freerambo 2009-08-06  
楼主的帖子对我这个初学者就是福音啊！ 支持！
9 楼 cuilidong 2008-10-07  
$.post 如何使用struts 的地址报JS的错 谁解答一下
8 楼 lirong1978 2008-09-11  
晕哦

jsonArray jsonList=jsonarry.fromObject(list);好象是这个，返回的就是JSON格式的LIST


res.getWrite().print(jsonList);客户端就收到啦

$.getJSON('a.action',function(data){//这里的data就是上面就是上面返回的东西
   alert(data.length);//显示有多少条记录
   alert(data[0].id);//这个id拿来的呢，就是HIBERNATE的那个是跟数据库对应的类哦，里面有个id字段
});
7 楼 phenom 2008-09-10  
已经略有所闻，JSONarray JSONObject，因为初学，所以希望有个例子参考下，
牛人可以的话帮助下初学的。
PrintWriter out = response.getWriter();
   JSONObject obj = new JSONObject();
JSONArray js = new JSONArray();
   //这里的数据拼装一般是从数据库查询来的
    for(int i=0;i<3;i++)
    {
     JSONObject objtemp = new JSONObject();
     objtemp.put("id", i);
     objtemp.put("age", "23");
     objtemp.put("name", "test"+i);
     objtemp.put("address", "test");
     js.add(objtemp);
    }
   obj.put("js",js);
         out.print(obj.toString());
  }catch(Exception e)
  {
   e.printStackTrace();
   System.out.print("消费明细json存储异常");
  }
  return null;
}
难道都要这样么？定义一个PrintWriter ,不用request.setAttribute()了
6 楼 lirong1978 2008-09-10  
JSON提供一个类处理的，可以直接把一个LIST转换成JSON格式叫jsonarray，自己去下载，在客户端用.getJSON就可以直接得到了啊。呵呵
5 楼 phenom 2008-09-10  
查了不少，就是没发现有和struts的，比如
List names=....................得到是一个集合；
request.setAttribute("names",names);
那可以直接像上面的
success:function(data){  
                  $('body').append("<div>"+data+"</div>").css("color","red");   }  

好像JS不能这样处理，那就要换个XML。JSON来存储，不知可否提供些例子，
4 楼 h_yz 2008-09-09  
本页使用的是$.ajax()
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
当文本框里为空时，按大哥的意思是＂用户名不能位空＂能显示出来，但页面上报错JS错误，什么＂childNodes"为空不是对象＂，咋一个回事呀？　
3 楼 iamcrzay 2008-09-08  
不会吧   我在ff 和ie 6 上都通过了的 ``````````
楼上的哥们你把你的错误信息 贴出来看看
2 楼 h_yz 2008-09-08  
我说大哥，咋不能运行呢？有问题呀
1 楼 aspx 2008-09-07  
最近刚用到jquery框架，非常感谢！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery ajax demo

    本教程将深入探讨"jquery ajax demo"，通过实际示例展示如何利用jQuery AJAX进行数据的发送和接收。 ### 1. AJAX基础概念 AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载...

    Ajax+JQuery应用Demo

    工作之余写的一些Ajax应用，有6个Demo,数据库为mysql，使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。

    html静态页JQuery ajax示例demo 源码

    在这个"html静态页JQuery ajax示例demo 源码"中，我们可以深入学习和理解AJAX在C# ASP.NET环境下的应用。 首先，AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，能够更新部分网页的...

    使用 jquery ajax访问后台服务器demo

    使用 jquery ajax访问后台服务器demo

    Ajax Jquery Login Demo UI

    Jquery Ajax DemoAjax Jquery Login DemoAjax Jquery Login DemoAjax Jquery Login DemoAjax Jquery Login Demo

    Jquery Ajax分页（有实例）

    **jQuery AJAX分页技术详解** 在Web开发中，分页是一种常见的数据展示方式，它能够有效地组织大量数据，提高页面加载速度，优化用户体验。jQuery，一个轻量级、功能丰富的JavaScript库，结合AJAX（异步JavaScript和...

    jquery ajax Login Demo

    在这个“jQuery AJAX Login Demo”项目中，我们将探讨如何使用jQuery库中的$.ajax方法实现一个简单的用户登录功能。 首先，jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及...

    Ajax_Jquery_Demo

    "Ajax_Jquery_Demo"这个压缩包文件提供了学习和实践这两个技术的机会。下面，我们将深入探讨Ajax和jQuery的核心概念、用法及其在Web开发中的应用。 ### Ajax Ajax的核心理念是局部刷新，它通过XMLHttpRequest对象...

    jQuery使用AJAX Demo

    jQuery使用AJAX的测试Demo，使用JSONP支持跨域。

    Ajax_Json_jQuery详细Demo

    综上所述，"Ajax_Json_jQuery详细Demo"包含了一系列关于这三者如何协同工作的实例，对初学者来说是极好的学习资源。通过这些示例，你可以了解如何使用jQuery简化Ajax调用，以及如何处理JSON数据，从而更好地构建交互...

    jquery ajax servlet json简单demo

    【Demo流程】在这个"jquery ajax servlet json简单demo"中，我们可以预期以下流程： 1. 客户端（浏览器）的JavaScript代码使用jQuery的AJAX函数发起请求，请求可能包含一些参数，格式化为JSON。 2. 请求被发送到...

    jquery_demo03:ajax学习

    这个“jquery_demo03:ajax学习”项目显然关注于利用jQuery进行Ajax（异步JavaScript和XML）操作的学习。Ajax技术允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，提高了用户体验。现在，让...

    30个jquery经典Demo

    《jQuery经典Demo详解：探索30个精彩实例》 jQuery，作为一款强大的JavaScript库，以其简洁的API和高效的功能，深受Web开发者的喜爱。这里我们聚焦于30个经典的jQuery Demo，它们涵盖了从基础交互到复杂动画的各种...

    json +jquery DEMO AJAX

    在本DEMO中，我们将探讨如何结合JSON和jQuery实现AJAX交互。 首先，了解jQuery的AJAX方法。主要有`$.ajax()`, `$.get()`, `$.post()`等。其中，`$.ajax()`是最全面的，可以配置各种选项，如URL、类型（GET或POST）...

    jquery ajax源代码

    ### jQuery AJAX 源代码分析 #### 一、概述 jQuery 是一款优秀的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载...

    MVC2 Wcf Ajax Jquery Demo

    综上所述，这个"MVC2 Wcf Ajax Jquery Demo"是一个基于.NET Framework的Web应用程序示例，展示了如何使用MVC2框架、WCF服务、AJAX技术和jQuery库来构建一个交互式的Web应用。开发者可以通过这个示例学习如何整合这些...

    php+jquery+ajax最简单例子

    3. **Ajax请求**：利用jQuery的`$.ajax()`方法发起请求。设置URL为PHP脚本的路径，方法通常为GET或POST，根据需求决定是否传递数据。 4. **PHP处理**：在服务器端，PHP脚本接收Ajax发送的数据（如果有的话），可能...

    jquery demo

    在提供的“ajax demo”中，你可能看到一个使用jQuery AJAX的示例。这个例子可能展示了如何使用`$.ajax()`发送一个请求，并在成功接收响应后更新页面内容。学习这个示例可以帮助你理解如何在实际项目中集成jQuery的...

    Jquery和ajax结合使用的小例子

    **jQuery和Ajax结合使用是Web开发中的常见技术组合，它能帮助开发者实现页面无刷新的数据交互，提升用户体验。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下更新部分网页内容的技术...

    jQuery ztreedemo

    在 `jQuery ztreedemo` 中，可能会使用 AJAX 技术动态加载或更新树形结构中的数据。 8. **文件结构** - 压缩包中的 `MyTree` 文件可能是包含 HTML、CSS、JavaScript 代码以及可能的数据文件（如 JSON 或 XML）的...

Magicbox
Global site tag (gtag.js) - Google Analytics