网上的 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>
分享到：
相关推荐
工作之余写的一些Ajax应用，有6个Demo,数据库为mysql，使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。
在这个"html静态页JQuery ajax示例demo 源码"中，我们可以深入学习和理解AJAX在C# ASP.NET环境下的应用。 首先，AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，能够更新部分网页的...
使用 jquery ajax访问后台服务器demo
Jquery Ajax DemoAjax Jquery Login DemoAjax Jquery Login DemoAjax Jquery Login DemoAjax Jquery Login Demo
**jQuery AJAX分页技术详解** 在Web开发中，分页是一种常见的数据展示方式，它能够有效地组织大量数据，提高页面加载速度，优化用户体验。jQuery，一个轻量级、功能丰富的JavaScript库，结合AJAX（异步JavaScript和...
在这个“jQuery AJAX Login Demo”项目中，我们将探讨如何使用jQuery库中的$.ajax方法实现一个简单的用户登录功能。 首先，jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及...
"Ajax_Jquery_Demo"这个压缩包文件提供了学习和实践这两个技术的机会。下面，我们将深入探讨Ajax和jQuery的核心概念、用法及其在Web开发中的应用。 ### Ajax Ajax的核心理念是局部刷新，它通过XMLHttpRequest对象...
jQuery使用AJAX的测试Demo，使用JSONP支持跨域。
综上所述，"Ajax_Json_jQuery详细Demo"包含了一系列关于这三者如何协同工作的实例，对初学者来说是极好的学习资源。通过这些示例，你可以了解如何使用jQuery简化Ajax调用，以及如何处理JSON数据，从而更好地构建交互...
【Demo流程】在这个"jquery ajax servlet json简单demo"中，我们可以预期以下流程： 1. 客户端（浏览器）的JavaScript代码使用jQuery的AJAX函数发起请求，请求可能包含一些参数，格式化为JSON。 2. 请求被发送到...
这个“jquery_demo03:ajax学习”项目显然关注于利用jQuery进行Ajax（异步JavaScript和XML）操作的学习。Ajax技术允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，提高了用户体验。现在，让...
在本DEMO中，我们将探讨如何结合JSON和jQuery实现AJAX交互。 首先，了解jQuery的AJAX方法。主要有`$.ajax()`, `$.get()`, `$.post()`等。其中，`$.ajax()`是最全面的，可以配置各种选项，如URL、类型（GET或POST）...
### jQuery AJAX 源代码分析 #### 一、概述 jQuery 是一款优秀的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载...
综上所述，这个"MVC2 Wcf Ajax Jquery Demo"是一个基于.NET Framework的Web应用程序示例，展示了如何使用MVC2框架、WCF服务、AJAX技术和jQuery库来构建一个交互式的Web应用。开发者可以通过这个示例学习如何整合这些...
3. **Ajax请求**：利用jQuery的`$.ajax()`方法发起请求。设置URL为PHP脚本的路径，方法通常为GET或POST，根据需求决定是否传递数据。 4. **PHP处理**：在服务器端，PHP脚本接收Ajax发送的数据（如果有的话），可能...
在提供的“ajax demo”中，你可能看到一个使用jQuery AJAX的示例。这个例子可能展示了如何使用`$.ajax()`发送一个请求，并在成功接收响应后更新页面内容。学习这个示例可以帮助你理解如何在实际项目中集成jQuery的...
**jQuery和Ajax结合使用是Web开发中的常见技术组合，它能帮助开发者实现页面无刷新的数据交互，提升用户体验。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下更新部分网页内容的技术...
在 `jQuery ztreedemo` 中，可能会使用 AJAX 技术动态加载或更新树形结构中的数据。 8. **文件结构** - 压缩包中的 `MyTree` 文件可能是包含 HTML、CSS、JavaScript 代码以及可能的数据文件（如 JSON 或 XML）的...
以下是一个简单的Ajax GET请求示例，通过加载一个本地文件（例如，`ajaxDEMO.txt`）并将其内容显示在页面上： ```javascript // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 监听状态变化 xhr....