最近在学习使用jquery,因为需要使用ajax进行异步调用,所以在网上学习了一下。现在通过实例,把自己知道的记录下来。
本人通过jsp,servlet分别担任前端与后台处理,jsp通过jquery的ajax调用Servlet,后台处理之后得到的信息返回前端。
servlet后台对象转化为json格式,可以通过两种方式:
1.fastjson-1.1.1.jar(此方法使用比较简便)
2.json-lib-2.4-jdk15.jar(此方法在代码中也有使用,已经注释)
首先在web.xml部署一个简单的servlet(DemoServlet):
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"> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>demoServlet</servlet-name> <servlet-class>servlet.DemoServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>demoServlet</servlet-name> <url-pattern>/demoServlet</url-pattern> </servlet-mapping> </web-app>
estAjaxPojo包中定义两个pojo:
Address.java
package testAjaxPojo; public class Address implements java.io.Serializable{ private String province; private String city; private String country; public Address() { } public Address(String province, String city, String country) { this.province = province; this.city = city; this.country = country; } public String getProvince() { return province; } public void setProvince(String province) { this.province = province; } public String getCity() { return city; } public void setCity(String city) { this.city = city; } public String getCountry() { return country; } public void setCountry(String country) { this.country = country; } }
Person.java
package testAjaxPojo;
package testAjaxPojo; public class Person implements java.io.Serializable{ private String name; private String sex; private Integer age; private Address address; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public Address getAddress() { return address; } public void setAddress(Address address) { this.address = address; } }
servlet.DemoServlet.java
package servlet; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSON; import testAjaxPojo.Address; import testAjaxPojo.Person; public class DemoServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/xml;charset=utf-8"); resp.setHeader("Cache-Control","no-cache"); String str = req.getParameter("actionId"); System.out.println(str); try{ Person person1 = new Person(); person1.setName("小王"); person1.setSex("女"); person1.setAge(23); person1.setAddress(new Address("辽宁省","大连市","高新园区")); List<Person> list = new ArrayList<Person>(); list.add(person1); resp.getWriter().write(JSON.toJSONString(list)); /*try { JSONArray jsonArray = JSONArray.fromObject(list); JSONObject jsonObject = new JSONObject(); jsonObject.put("person", jsonArray); resp.getWriter().write(jsonObject.toString()); }catch (IOException e) { e.printStackTrace(); }*/ }catch(Exception e){ e.printStackTrace(); } } }
servlet已经完成,现在就需要jsp通过jquery的ajax方法调用返回的数据进行分析,就可以得到想要的结果index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</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 type="text/javascript" src="js/jquery-2.1.4.js"></script> <script type="text/javascript"> function addPerson(){ $.ajax({ type: "post", url: "demoServlet?actionId=100", dataType: "json", success: function (data) { var json = eval(data); $.each(json, function(i, p) { $("#name").text(p.name); $("#age").text(p.age); $("#sex").text(p.sex); $("#address").text(p.address.province + p.address.city + p.address.country); }); /* var list = data.person; $.each(list, function(i, p) { $("#name").text(p.name); $("#age").text(p.age); $("#sex").text(p.sex); $("#address").text(p.address.province + p.address.city + p.address.country); }); */ }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } }); } /* $.getJSON("demoServlet",null,function call(data) { var list = data.person; $.each(list, function(i, p) { var row = $("#tr").clone(); row.find("#name").text(p.name); row.find("#age").text(p.age); row.find("#sex").text(p.sex); row.find("#address").text(p.address.province + p.address.city + p.address.country); row.appendTo("#tbody"); }); }); } */ </script> </head> <body> <input type="button" value="JsonView" onClick="addPerson();"> <div id="dateMessage"> <table id="planTable" border="1"> <tr> <td>Name</td> <td>Sex</td> <td>Age</td> <td>Address</td> </tr> <tbody id="tbody"> <tr id="tr"> <td id="name"></td> <td id="sex"></td> <td id="age"></td> <td id="address"></td> </tr> </tbody> </table> </div> </body> </html>
到此实现简单的功能
相关推荐
这个压缩包中的资源,"SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白",显然提供了一个使用这些技术实现Ajax级联操作的实例。下面将详细介绍这些技术及其在Ajax操作中的应用。 **SSH ...
在"Struts+Jquery+Ajax+Json应用实例"中,前端使用jQuery库来监听用户事件,比如点击按钮。当事件触发时,jQuery通过Ajax发送一个HTTP请求到后端的Struts Action。在Struts框架中,这个Action会处理请求,执行必要的...
【标题】:“jQuery + AJAX + JSON + Servlet 实例源码” 这个实例源码主要展示了如何在Web开发中利用jQuery库进行AJAX异步请求,与后台Servlet进行数据交互,并通过JSON格式来序列化和反序列化数据。这些技术是...
6. Struts2与Ajax的集成,使用JQuery的$.ajax()或$.getJSON()方法 7. 请求与响应的处理,包括参数传递和数据封装 8. 实例演示:使用Struts2+Jquery+Ajax实现动态加载数据或表单验证 "struts2 jar"文件包含了Struts2...
"ASP.NET编程知识:ASP.NET中利用Jquery+Ajax+Json实现无刷新分页的实例代码" 本文将详细介绍如何使用Jquery、Ajax和Json技术在ASP.NET中实现无刷新分页的实例代码。通过本文,读者将了解到无刷新分页的实现原理、...
本文实例讲述了jQuery+ajax+asp.net获取Json值的方法。分享给大家供大家参考,具体如下: ...jQueryAjaxJson取值示例</title> [removed][removed] [removed] $(document).ready(function () { $("#B
5. 结合使用jQuery和AJAX:演示如何利用jQuery简化AJAX调用,以及如何处理JSON响应数据,实现实时更新页面内容。 这些知识点对于想要学习Web开发,特别是Java RIA(Rich Internet Application)开发的人员非常重要...
在这个"ssh+jquery+ajax二级联动"项目中,开发者可能创建了一个简单的Web应用,实现了基于Ajax的二级联动选择功能。这通常在多级下拉菜单或地区选择等场景中常见,例如:省份选择后,城市列表会动态加载更新。 1. *...
7. **jQuery处理响应**:在AJAX的success回调函数中,解析服务器返回的JSON数据,将新数据插入到页面的适当位置。 8. **用户界面更新**:更新“加载更多”按钮的状态,或者显示已无更多数据的提示。 9. **错误处理...
**Ajax+JSON 实例详解** 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术已经成为提升用户体验的重要工具,它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON(JavaScript Object ...
在ASP.NET中,我们可以创建一个ASP.NET Web Form页面(如`AjaxJson.aspx`),并在后台代码(如`AjaxJson.aspx.cs`)中处理数据获取和计算分页信息。同时,我们需要在页面中包含必要的JavaScript库,如jQuery和用于...
本示例是关于如何利用jQuery、Ajax和.NET技术实现后台动态分页的一个实例,结合了`jquery.pageFoot.js`插件来实现这一功能。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...
Struts2、Hibernate3、JQuery、Ajax以及Json是Web开发中的重要技术栈,它们各自在Web应用程序中扮演着不同的角色。在这个“三级联动”项目中,这些技术被巧妙地结合在一起,实现了数据的动态交互和展示。 Struts2是...
【ASP + jQuery AJAX 实例源码详解】 ASP (Active Server Pages) 是微软开发的一种服务器端脚本语言,常用于构建动态网页。jQuery 是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画以及AJAX交互。AJAX...
php+ajax(jquery)+json 实现英语单词在线测试(有发音+例句),背单词不再单调,简单模仿奇迹英语功能。仅供学习使用。 内置公共英语等级考试词库,可自行添加。 演示地址:http://dhlxmy.dh.funpic.org/ 如有广告,...
本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据通信。 首先,jQuery是一个强大的JavaScript库,它为DOM操作、事件处理、动画效果和Ajax交互提供了...
主要介绍了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求json格式数据并渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下
本文通过实例详细介绍了如何使用Jquery、Ajax和Json实现数据的异步分页功能。后端通过Java生成Json格式数据,前端则通过Jquery处理Ajax请求和分页逻辑,展示数据。整个过程涉及前后端的协作,页面渲染和用户交互的...
在IT行业中,jQuery和Ajax是两个非常重要的技术,它们在构建动态、交互性强的Web应用程序时发挥着关键作用。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。Ajax...
jQuery+Json 实现Ajax无刷新分类管理实例演示 基于jquery+json实现的网站后台管理中无刷新的分类管理功能演示,如上图演示所示,可无刷新添加一个分类、在动画弹出的对话框中输入分类名称即可实现保存,同进还可无...