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

JQuery配合Ajax、JSON使用

    博客分类:
  • java
阅读更多
JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。
JSON的规则很简单: 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。具体细节参考http://www.json.org/json-zh.html
举个简单的例子:
  function showJSON() {   
      var user =    
      {    
          "username":"andy",   
          "age":20,   
          "info": { "tel": "123456", "cellphone": "98765"},   
          "address":   
              [   
                  {"city":"beijing","postcode":"222333"},   
                  {"city":"newyork","postcode":"555666"}   
              ]   
      }   
         
      alert(user.username);   
      alert(user.age);   
      alert(user.info.cellphone);   
      alert(user.address[0].city);   
      alert(user.address[0].postcode);   
  }  



在使用JSON之前先从http://www.json.org/java/下载java文件
1、MAP使用
后台:
Map map = new HashMap();
map.put("name", "xj");
map.put("age", 24);
JSONObject json = new JSONObject(map);
response.getWriter().println(json);
response.getWriter().flush();


前台:
function query() {
		$.ajax( {
			url : "servlet/Hello",
			global : false,
			type : "POST",
			data : ( {
				Name : "xiongjin"
			}),
			dataType : "html",
			success : function(data){
			  var temp = jQuery.parseJSON(data);
			  alert(temp.name+temp.age);
		    }
		})
	}


2、List
后台:
List list = new ArrayList();
Map map = new HashMap();
map.put("name", "xj");
map.put("age", 24);
Map map2 = new HashMap();
map2.put("name", "xj1");
map2.put("age", 241);
		
list.add(map);
list.add(map2);
JSONArray array = new JSONArray(list);
response.getWriter().println(array);
response.getWriter().flush();


前台:
function query() {
		$.ajax( {
			url : "servlet/Hello",
			global : false,
			type : "POST",
			data : ( {
				Name : "xiongjin"
			}),
			dataType : "html",
			success : function(data){
			  var temp = jQuery.parseJSON(data);
			  for(var i =0;i<temp.length;i++){
			     alert(temp[i].name+temp[i].age);
			  }
		    }
		})
	}



3、bean
后台:
//注意bean必须是public类型,或者修改JSONObject
public class Person {
	private String name;
	private String age;

	public Person(String name, String age) {
		super();
		this.name = name;
		this.age = age;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getAge() {
		return age;
	}

	public void setAge(String age) {
		this.age = age;
	}

}

Person per = new Person("熊劲","27");
JSONObject json = new JSONObject(per);
response.getWriter().println(json);
response.getWriter().flush();



前台:
function query() {
		$.ajax( {
			url : "servlet/Hello",
			global : false,
			type : "POST",
			data : ( {
				Name : "xiongjin"
			}),
			dataType : "html",
			success : function(data){
			  var temp = jQuery.parseJSON(data);
			  alert(temp.name+temp.age);
		    }
		})
	}


分享到:
评论

相关推荐

    jQuery Ajax前后端使用JSON进行交互示例

    本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例,实现前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端,有兴趣的可以了解一下。

    Jquery ajax json 总结

    JQuery AJAX 和 JSON 是在 Web 开发中处理异步数据传输和数据格式化的重要工具。本文将深入探讨这两个概念以及它们在实际应用中的使用方法。 首先,JQuery 的 AJAX(Asynchronous JavaScript and XML)功能允许...

    SSH1,JQuery的ajax返回json二维数组处理过程

    在本文中,我们将探讨如何使用SSH1框架与jQuery的AJAX功能来处理JSON二维数组,特别是在实现菜单联动下拉框的场景中。SSH1(Spring、Struts、Hibernate)是Java开发中的一个流行MVC框架组合,而jQuery的AJAX功能则...

    jquery ajax Datatable与json之间数据转换

    jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...

    jQuery中ajax请求后台返回json数据并渲染HTML的方法

    1. jQuery的AJAX方法:在文章中,通过使用jQuery提供的$.ajax()方法来发起异步请求。这个方法允许我们指定请求的类型(如GET或POST)、URL地址、传递的数据以及当请求成功时如何处理返回的数据。 2. 后台数据的返回...

    jQuery ajax读取json文件内容

    其中,使用jQuery的Ajax功能来读取JSON文件内容是前端开发中的常见需求,尤其在动态加载数据、实现异步交互方面发挥着重要作用。 ### 标题解析:“jQuery ajax读取json文件内容” 此标题直截了当,明确指出将通过...

    jquery ajax servlet json简单demo

    这个简单的demo是一个很好的学习资源,帮助初学者理解如何使用jQuery的AJAX功能与后端Servlet交互,以及如何使用JSON进行数据交换。通过实践这个demo,你可以更深入地了解这些技术的实际应用。同时,它也展示了Web...

    PHP-JQuery-Ajax-json

    通过结合使用PHP、jQuery、Ajax和JSON,开发者可以创建出高度交互、用户体验优良的Web应用。例如,用户在填写表单时,可以使用Ajax实时验证输入,利用PHP处理服务器端逻辑,而JSON则作为数据传输的桥梁,确保信息的...

    struts2使用jquery整合ajax、json用户登录实例源码

    在jQuery中,我们可以使用$.ajax()方法发送登录请求,如下所示: ```javascript $.ajax({ url: 'login.action', type: 'POST', data: {username: $('#username').val(), password: $('#password').val()}, ...

    jquery的ajax传json对象数组到struts2的action

    本文将深入探讨如何使用jQuery的AJAX方法发送JSON对象数组到Struts2的Action,并在后端进行处理。 首先,我们了解JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于...

    jQuery_Ajax_Json全解析

    **jQuery、Ajax与JSON全解析** ...总结,jQuery、Ajax和JSON的结合使用,为网页动态交互提供了强大的支持,使开发者能够更高效地创建富交互性的Web应用。理解并熟练掌握这些技术,对于提升Web开发技能至关重要。

    jQuery-ajax-json实现自动轮播图.rar

    这样,我们就实现了使用jQuery、ajax和json动态加载并展示自动轮播图的功能。需要注意的是,实际应用中还需要考虑错误处理、图片加载优化、触摸滑动支持等细节,以提供更完善的用户体验。此外,可以结合CSS3的动画...

    jquery+ajax+json例子

    在Web开发中,jQuery、Ajax和JSON是三个非常重要的技术,它们共同构成了高效、动态的用户界面的基础。本文将深入探讨这些技术,并结合一个名为"TestJQuery"的示例来展示它们如何协同工作。 首先,jQuery是一个...

    flgl.rar_ajax json jquery_jquery json

    标题“flgl.rar_ajax json jquery_jquery json”和描述中提到的主题主要集中在使用Ajax、JSON以及jQuery技术在前端实现与后端数据交互的过程。这里,我们详细探讨这些关键概念及其在实际开发中的应用。 首先,**...

    jquery ajax用json传值实例asp.net

    在本文中,我们将深入探讨如何使用jQuery AJAX与ASP.NET一起工作,通过JSON格式传递和接收数据。这非常适合初学者,因为我们将逐步解析整个过程,并提供实际的代码示例。 首先,理解jQuery AJAX的核心概念至关重要...

    ajax+json实例

    在.NET环境下,使用AJAX和JSON可以实现高效的前后端通信。.NET提供了System.Web.Script.Serialization命名空间下的JavaScriptSerializer类,用于将.NET对象序列化为JSON字符串,或者将JSON字符串反序列化为.NET对象...

    JSON+js+jquery+ajax基础.zip

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

    Struts2 与Jquery Ajax的json数据交换的典型范例

    总结,Struts2和jQuery的Ajax JSON数据交换涉及以下几个关键步骤:配置Struts2的JSON插件,编写返回JSON数据的Action,使用jQuery发起Ajax请求并处理返回的JSON数据。通过这种方式,可以实现客户端与服务器之间的...

    php基于jquery的ajax技术传递json数据简单实例.docx

    jQuery 库可以帮助我们快速地开发网页应用程序,在本例中,我们使用 jQuery 库来实现 Ajax 功能。 POST 请求 POST 请求是一种 HTTP 请求方法,用于将数据从客户端发送到服务器端。在本例中,我们使用 POST 请求将...

    项目组管理系统,Java+json+jQuery+ajax

    这个系统结合了JSON、jQuery和Ajax技术,以实现动态数据交互和用户友好的界面体验。 首先,我们来详细了解Java在这个系统中的作用。Java是一种广泛应用于服务器端开发的编程语言,具有跨平台特性,使得开发的系统...

Global site tag (gtag.js) - Google Analytics