`
nofee1ing
  • 浏览: 1827 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery+ajax+json实例

阅读更多

最近在学习使用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操作,绝对精华,代码简练清晰,绝对能看明白

    这个压缩包中的资源,"SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白",显然提供了一个使用这些技术实现Ajax级联操作的实例。下面将详细介绍这些技术及其在Ajax操作中的应用。 **SSH ...

    Struts+Jquery+Ajax+Json应用实例

    在"Struts+Jquery+Ajax+Json应用实例"中,前端使用jQuery库来监听用户事件,比如点击按钮。当事件触发时,jQuery通过Ajax发送一个HTTP请求到后端的Struts Action。在Struts框架中,这个Action会处理请求,执行必要的...

    jquery+ajax+json+servlet实例源码

    【标题】:“jQuery + AJAX + JSON + Servlet 实例源码” 这个实例源码主要展示了如何在Web开发中利用jQuery库进行AJAX异步请求,与后台Servlet进行数据交互,并通过JSON格式来序列化和反序列化数据。这些技术是...

    Struts2+Jquery+Ajax

    6. Struts2与Ajax的集成,使用JQuery的$.ajax()或$.getJSON()方法 7. 请求与响应的处理,包括参数传递和数据封装 8. 实例演示:使用Struts2+Jquery+Ajax实现动态加载数据或表单验证 "struts2 jar"文件包含了Struts2...

    【ASP.NET编程知识】asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码.docx

    "ASP.NET编程知识:ASP.NET中利用Jquery+Ajax+Json实现无刷新分页的实例代码" 本文将详细介绍如何使用Jquery、Ajax和Json技术在ASP.NET中实现无刷新分页的实例代码。通过本文,读者将了解到无刷新分页的实现原理、...

    jQuery+ajax+asp.net获取Json值的方法

    本文实例讲述了jQuery+ajax+asp.net获取Json值的方法。分享给大家供大家参考,具体如下: ...jQueryAjaxJson取值示例&lt;/title&gt; [removed][removed] [removed] $(document).ready(function () { $("#B

    JSON+js+jquery+ajax基础.zip

    5. 结合使用jQuery和AJAX:演示如何利用jQuery简化AJAX调用,以及如何处理JSON响应数据,实现实时更新页面内容。 这些知识点对于想要学习Web开发,特别是Java RIA(Rich Internet Application)开发的人员非常重要...

    ssh+jquery+ajax二级联动

    在这个"ssh+jquery+ajax二级联动"项目中,开发者可能创建了一个简单的Web应用,实现了基于Ajax的二级联动选择功能。这通常在多级下拉菜单或地区选择等场景中常见,例如:省份选择后,城市列表会动态加载更新。 1. *...

    jquery+ajax+asp+mysql加载更多。

    7. **jQuery处理响应**:在AJAX的success回调函数中,解析服务器返回的JSON数据,将新数据插入到页面的适当位置。 8. **用户界面更新**:更新“加载更多”按钮的状态,或者显示已无更多数据的提示。 9. **错误处理...

    ajax+json实例

    **Ajax+JSON 实例详解** 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术已经成为提升用户体验的重要工具,它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON(JavaScript Object ...

    asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    在ASP.NET中,我们可以创建一个ASP.NET Web Form页面(如`AjaxJson.aspx`),并在后台代码(如`AjaxJson.aspx.cs`)中处理数据获取和计算分页信息。同时,我们需要在页面中包含必要的JavaScript库,如jQuery和用于...

    jquery+ajax+.net动态分页

    本示例是关于如何利用jQuery、Ajax和.NET技术实现后台动态分页的一个实例,结合了`jquery.pageFoot.js`插件来实现这一功能。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...

    Struts2+hibernate3+JQuery+ajax+json三级联动

    Struts2、Hibernate3、JQuery、Ajax以及Json是Web开发中的重要技术栈,它们各自在Web应用程序中扮演着不同的角色。在这个“三级联动”项目中,这些技术被巧妙地结合在一起,实现了数据的动态交互和展示。 Struts2是...

    asp+jquery ajax实例源码,添加,删除,修改,分页

    【ASP + jQuery AJAX 实例源码详解】 ASP (Active Server Pages) 是微软开发的一种服务器端脚本语言,常用于构建动态网页。jQuery 是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画以及AJAX交互。AJAX...

    php+ajax(jquery)+json 实现英语单词在线测试(有发音+例句)

    php+ajax(jquery)+json 实现英语单词在线测试(有发音+例句),背单词不再单调,简单模仿奇迹英语功能。仅供学习使用。 内置公共英语等级考试词库,可自行添加。 演示地址:http://dhlxmy.dh.funpic.org/ 如有广告,...

    一个完整的jquery+ajax传送请求的实例

    本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据通信。 首先,jQuery是一个强大的JavaScript库,它为DOM操作、事件处理、动画效果和Ajax交互提供了...

    jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

    主要介绍了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求json格式数据并渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下

    使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    本文通过实例详细介绍了如何使用Jquery、Ajax和Json实现数据的异步分页功能。后端通过Java生成Json格式数据,前端则通过Jquery处理Ajax请求和分页逻辑,展示数据。整个过程涉及前后端的协作,页面渲染和用户交互的...

    jquery+ajax例子

    在IT行业中,jQuery和Ajax是两个非常重要的技术,它们在构建动态、交互性强的Web应用程序时发挥着关键作用。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。Ajax...

    jQuery+Json 实现Ajax无刷新分类管理实例演示

    jQuery+Json 实现Ajax无刷新分类管理实例演示 基于jquery+json实现的网站后台管理中无刷新的分类管理功能演示,如上图演示所示,可无刷新添加一个分类、在动画弹出的对话框中输入分类名称即可实现保存,同进还可无...

Global site tag (gtag.js) - Google Analytics