1. 相应的jar包的导入. json-lib-2.2.3-jdk15.jar, ezmorph-1.0.6.jar等.
2. 加入jquery.js
3. jquery each()方法的使用api.
http://api.jquery.com/jQuery.each/
4. 服务端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;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class JqueryAjaxServer extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
response.setContentType("text/html;charset=utf-8");
String account = request.getParameter("account");
JSONObject json = new JSONObject();
JSONArray array = new JSONArray();
JSONObject member = null;
for (int i = 0; i < 3; i++) {
member = new JSONObject();
member.put("name", "xiaohua"+i);
member.put("age", 20+i);
array.add(member);
}
json.put("account", account);
json.put("jsonArray", array);
PrintWriter pw = response.getWriter();
pw.print(json.toString());
System.out.println("json array :"+array.toString());
System.out.println("json object :"+json.toString());
pw.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
this.doGet(request, response);
}
}
5. jsp页面(jqueryAjax.jsp)
<%@ 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="jquery/jquery-1.3.1.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()},
dataType:'json', //很重要!!!. 预期服务器返回的数据类型
error:function(){
alert("error occured!!!");
},
success:function(data){
$.each(data.jsonArray,function(index){
$.each(data.jsonArray[index],function(key,value){
alert(key+":"+value)
});
});
$('body').append("<div>"+data.account+"</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>
6. 配置文件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>
分享到：
相关推荐
【Demo流程】在这个"jquery ajax servlet json简单demo"中，我们可以预期以下流程： 1. 客户端（浏览器）的JavaScript代码使用jQuery的AJAX函数发起请求，请求可能包含一些参数，格式化为JSON。 2. 请求被发送到...
这是一个基于Java Web技术的学生信息管理系统，实现了前后端分离的架构，使用了MySQL数据库来存储数据，Servlet作为服务器端处理逻辑，以及JSON和AJAX技术来实现实时的异步通信。下面将详细介绍这个系统的关键技术和...
这个“easyui+ajax+json+servlet实现用户登录注册简单demo”旨在为初学者提供一个理解这些技术实际应用的平台。 首先，EasyUI是一个基于jQuery的轻量级前端框架，它提供了丰富的UI组件，如表格、表单、对话框等，...
在这个"Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子"中，我们将探讨如何结合Java后端和JSON数据格式，通过AJAX技术在网页上展示动态曲线报表。 首先，`index_lineAjax.htm`是前端HTML文件，它包含了...
在本项目中，Servlet承担了与后台数据库交互的角色，它处理来自Datatables的Ajax请求，执行SQL查询（如SELECT、INSERT、UPDATE、DELETE）来完成数据的增删改查操作，并将结果以JSON格式返回给前端。 SQLite3则是一...
在"uploaddemo"这个压缩包中，可能包含了一个简单的JSP文件上传和AJAX获取JSON数据的示例项目。项目可能包括JSP页面、Servlet类、HTML/JavaScript代码以及数据库相关的配置文件。通过分析和运行这个示例，开发者可以...
本Demo将展示如何将`jQuery Uploadify`与Java的Servlet技术进行整合，实现在后台服务器上处理文件上传的流程。 首先，我们需要了解`jQuery Uploadify`的核心概念。Uploadify通过AJAX和Flash技术实现了无刷新的文件...
6. **前端页面与后端通信**：在Ajax jQuery Demo中，前端页面通过jQuery的Ajax方法与后端Servlet通信。通常，这涉及到在JavaScript中定义一个事件触发Ajax请求，然后在Servlet中处理请求并返回响应，最后在前端更新...
在JavaWeb开发中，jQuery和Ajax是两种非常重要的技术，它们极大地简化了前端与后端的数据交互过程。jQuery是一个高效、简洁的JavaScript库，而Ajax则是实现页面无刷新更新的关键技术。本实例将深入讲解如何结合...
在`AjaxDemo`这个项目中，很可能包含了使用jQuery AJAX进行后台数据操作的示例代码。可能的文件结构可能包括HTML页面（包含AJAX调用）、JavaScript文件（包含AJAX逻辑）以及可能的服务器端处理程序（如PHP、Java ...
在本例中，jQuery用于发起Ajax请求，获取Servlet提供的JSON数据。可以使用$.ajax()或$.getJSON()方法来实现这个功能，这些方法可以异步地从服务器获取数据，并在成功时执行回调函数。 最后，Ztree是一个强大的...
综上所述，"Servlet图片批量上传ajax异步上传"是一个完整的Web应用开发场景，涵盖了从前端的无刷新用户体验，到后端的文件处理，再到数据的JSON交换。这个Demo的实现可以帮助开发者理解如何在实际项目中整合这些技术...
在JSP中，可以设置一个Servlet或者Controller来接收请求，查询模拟数据库（可能是硬编码的数据或从文本文件读取）中的匹配项，然后将这些结果以JSON或XML格式返回给前端。 4. **动态效果**：为了让用户体验更加流畅...
本项目“读取Excel Demo&Servlet Demo”提供了一个实例，演示了如何利用Java技术栈实现从Excel文件中读取数据，并通过Servlet框架将数据动态展示在网页上。以下将详细介绍其中涉及的关键知识点： 1. **Eclipse**：...
在AjaxServletDemo中，可能使用了JavaScript库如jQuery或原生XMLHttpRequest对象来实现Ajax通信。 Servlet是Java Web应用中的一个关键组件，它负责处理来自客户端的请求，并返回响应。在AjaxServletDemo中，Servlet...
6. **前端JavaScript框架**：为了简化Ajax交互，可以使用像jQuery这样的JavaScript库，或者更现代的框架如React或Vue.js。它们提供了便利的方法来处理Ajax请求，简化DOM操作，使前端开发更加高效。 7. **搜索引擎...
【jqGrid Servlet Demo】是一个基于Java的Web应用示例，它展示了如何在Servlet环境中使用jqGrid这个强大的jQuery插件来创建动态、交互式的表格。jqGrid是一个功能丰富的数据网格组件，能够处理大量的数据并提供排序...
这个"ajax跨域请求demo.zip"压缩包提供了一个关于如何实现Ajax跨域请求的示例，涉及到前后端的交互。 首先，我们关注"前端代码"部分。前端通常使用JavaScript库如jQuery来实现Ajax请求。jQuery的`$.ajax()`方法是...
- **Servlet或Controller处理**：在Java后端，可以使用Servlet或Spring MVC的Controller来接收和处理Flexigrid的Ajax请求，然后返回JSON响应。 3. **JSP中的数据绑定** - **JSTL标签**：在JSP页面中，可以使用...
在这个图书商城Demo中，Servlet将作为应用的核心组件，负责接收用户的请求，如浏览图书、搜索图书、添加购物车、结算订单等，并返回相应的HTML页面或JSON数据。 项目的核心功能模块可能包括以下几个部分： 1. **...