`
2010_315
  • 浏览: 11139 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery Ajax Demo

    博客分类：
  • AJAX
AjaxjQueryCSSServletJava 
阅读更多
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> 
分享到：
| Jquery.validate 例子
评论
发表评论

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

相关推荐

    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