`

jQuery之get(txt,xml,json二点注意事项)

阅读更多
参考资料
1 jQuery ajax - get() 方法
http://www.w3school.com.cn/jquery/ajax_get.asp
2 使用jQuery.get(url,[data],[callback])不能获取返回的页面XML内容
http://blog.csdn.net/jilo88/article/details/5380635
3 JQuery解析xml 
http://nqlov.blog.163.com/blog/static/359003222008622501772/
http://blog.sina.com.cn/s/blog_4b81125f0100fca2.html
4 使用JQuery读取XML文件数据
http://www.cnblogs.com/lovemdb/articles/1502658.html
jQuery.get语法如下:
jQuery.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )
url一个包含发送请求的URL字符串
data向服务器发送请求的Key/value参数
success(data, textStatus, jqXHR)当请求成功后执行的回调函数。
dataType从服务器返回的预期的数据类型。默认:智能猜测(xml, json, script, or html)。
这是一个缩写的Ajax功能,这相当于:
$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

成功的回调函数是根据MIME类型的响应,通过返回的数据包括XML根节点, 字符串, JavaScript 文件, 或者 JSON 对象。 它也是通过文本地位的反应.
一 返回文本类型,直接传递参数
前台JS代码
$("#btnAjaxGet").click(function(event)
{
var username = encodeURI(encodeURI($("#username").val()));
var content = encodeURI(encodeURI("中国"));	
$.get("jqueryGet?username=" + username + "&content="+content+"&timestamp=" + (new Date()).getTime(),function(data){
  // decodeURI(data),后台没有经过java.net.URLDecoder.decode(tt, "UTF-8");就使用这个方法在解码一次,否则直接就是data		                 
     $('#divResult').html(decodeURI(data));						 
  });
});

后台代码
PrintWriter out = response.getWriter();
response.setContentType("text/html;charset=UTF-8");
String info = ""; 		
String tt = (String) request.getParameter("username");
String username = java.net.URLDecoder.decode(tt, "UTF-8");
String cc = request.getParameter("content");
String content = java.net.URLDecoder.decode(cc, "UTF-8");			
info = "<div class='comment'><h2> " +  tt + " </h2><p class='para'> " + cc + " </p></div>";
out.println(info);
out.flush();
out.close();

二 返回文本类型,通过jQuery提供的方法传递参数,请注意和上一个方法传递参数时的编码转换
$("#btnAjaxPost").click(function(event)
{
var username = encodeURI($("#username").val());	
var content = encodeURI("中国");
//发送Post请求		               
 $.get("jqueryGet" ,{ "username": username,"content":content},function(data){
	 $('#divResult').html(decodeURI(data));						 
});
});

后台代码同上
三 返回文本类型,通过回调函数
前台代码
$("#btnAjaxCallBack").click(function(event)
{
	var username = encodeURI($("#username").val());	
	var content = encodeURI("中国");	           
	//发送Post请求, 返回后执行回调函数.
	$.get("jqueryGet", { "username": username,"content":content}, function(responseText, textStatus, XMLHttpRequest)
	{
		
	    responseText = " Add in the CallBack Function! <br/>" + decodeURI(responseText);
	    $("#divResult").html(responseText); //或者: $(this).html(responseText);
	});
});

后台代码同上
四 返回XML类型
前台代码
$("#btnAjaxXml").click(function(event)
{
	var username = encodeURI($("#username").val());	
	var content = encodeURI("中国");	           
	//发送Post请求, 返回后执行回调函数.
	$.get("jqueryGet", { "username": username,"content":content}, function(data)
	{   
	    var username = decodeURI($(data).find("comment").attr("username"));
	    var content = decodeURI($(data).find("comment content").text());
	    var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
	    $("#divResult").html(txtHtml); 
	});
});

后台代码
PrintWriter out = response.getWriter();
response.setContentType("text/xml");		
String tt = (String) request.getParameter("username");
String username = java.net.URLDecoder.decode(tt, "UTF-8");
String cc = request.getParameter("content");
String content = java.net.URLDecoder.decode(cc, "UTF-8");
StringBuilder xml = new StringBuilder();
xml.append("<?xml version='1.0' encoding='UTF-8'?>");
xml.append("<comments>");
xml.append("<comment username='" + tt + "'>");
xml.append("<content>" + cc + "</content>");
xml.append("</comment>");
xml.append("</comments>");		
String info = xml.toString();
out.println(info);
out.flush();
out.close();

五 返回JSON类型
特别说明:后台返回JSON类型要注意二点
1 使用jQuery1.4+的版本要注意组装JSON数据的格式
请参见文章
jquery ajax dataType为json的问题
http://makecompany.iteye.com/blog/923669
JSON格式总结下,详细的去json.org查看
1)键名称:用双引号括起
2)字符串:用使用双引号括起
3)数字,布尔类型不需要使用双引号括起.

2 请加上响应内容类型
response.setContentType("application/json");

必须具备以上这二点,jQuery才会正常工作.
前台代码如下:
$("#send").click(function(){		                
	var username = encodeURI($("#username").val());	
	var content = encodeURI("中国");	 		                 
	$.get("jqueryGet", {"username": username,"content":content}, function (data, textStatus){							   
			  
			    var username = data.username;
				var content = data.content;									
				username =  decodeURI(username);
				content = decodeURI(content);									
			    var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
	$("#resText").html(txtHtml); 
	});
})

后台代码如下:
response.setContentType("application/json");
String username = request.getParameter("username");
String content = request.getParameter("content");
String result = "{\"username\" : \""+username+"\" , \"content\" : \""+content+"\"}"; 
System.out.println(result);
out.println(result); 

特别说明:在jQuery权威指南示例中,使用的是jQuery1.3.1版本,返回JSON格式不严格,在jQuery1.4+以上的版本必须满足json.org网站定义的格式才能执行
分享到:
评论

相关推荐

    jQuery xml-to-json xml转JSON插件

    jQuery xml-to-json插件是一种用于将XML数据转换为JavaScript Object Notation (JSON)格式的工具。在Web开发中,XML和JSON都是常见的数据交换格式,但它们有着不同的应用场景和优势。XML(Extensible Markup ...

    jquery xml转json插件

    **jQuery XML to JSON 插件详解** 在Web开发中,数据交换格式的选择至关重要。XML(Extensible Markup Language)和JSON(JavaScript Object Notation)是两种常见的数据交换格式,各有其优势。XML提供了一种结构化...

    jQuery+get/post+Ajax+Json

    1. jQuery的$.get和$.post方法:这两种方法是jQuery提供的Ajax(异步JavaScript和XML)接口,用于与服务器进行非刷新的数据交换。$.get用于发送GET请求,而$.post用于发送POST请求。它们都接受四个参数:URL、数据、...

    使用jQuery读取xml和json的案例代码

    本篇文章将深入探讨如何使用jQuery来读取XML和JSON数据,这两种数据格式在Web开发中广泛用于数据交换。 XML(Extensible Markup Language)是一种标记语言,用于存储和传输结构化数据。JSON(JavaScript Object ...

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

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

    jQuery使用getJSON方法获取json数据完整示例

    在前端开发中,处理JSON数据是必不可少的一部分,而jQuery库提供的getJSON方法则是获取JSON数据的一种便捷方式。本知识点将详细介绍如何使用jQuery的getJSON方法,以及相关的技巧和完整示例。 首先,我们需要了解...

    Jquery解析JSON和XML示例

    本文将详细讲解如何使用jQuery解析JSON和XML数据,通过给出的文件名称,我们可以推测这是一个关于Web应用中添加账户和应用的场景。 首先,让我们来看看JSON(JavaScript Object Notation)和XML(eXtensible Markup...

    jQuery中对异步提交JSON和XML数据的处理方式

    针对JSON和XML这两种数据格式,jQuery提供了多种处理方式。下面将详细讲解如何使用jQuery处理这两种数据类型。 首先,jQuery中的AJAX请求主要有三种基本方法:`$.post()`, `$.get()` 和 `$.ajax()`。这些方法都可以...

    XML与JSON相互转化

    在HTML网页文件中,实现XML与JSON的转换,可以使用JavaScript库,如jQuery的parseXML和$.getJSON,或者使用原生的XMLDOM和JSON.parse()、JSON.stringify()方法。这些工具和方法可以帮助开发者轻松地在XML和JSON之间...

    jQuery_Ajax_Json全解析

    **jQuery、Ajax与JSON全解析** 在Web开发中,jQuery、Ajax和JSON是不可或缺的工具,它们共同构建了现代网页的动态交互体验。本解析将深入探讨这三个概念及其相互关系。 **jQuery:简化JavaScript操作** jQuery是...

    JQuery+AJAX处理XML数据

    **jQuery + AJAX 处理 XML 数据** 在网页开发中,jQuery 和 AJAX 技术的结合是获取和操作服务器端数据的常见方式。本篇将详细探讨如何使用 jQuery 的 AJAX 功能来处理 XML(可扩展标记语言)数据。 **1. jQuery 和...

    jquery与java交互通过json传递数据的经典实例

    在Web开发中,jQuery、AJAX、Java以及JSON是四个非常关键的技术,它们共同构建了前端与后端高效通信的基础。本实例将详细介绍如何利用jQuery与Java通过JSON进行数据交互,帮助开发者理解并掌握这一重要技能。 ...

    json +jquery DEMO AJAX

    JSON(JavaScript Object Notation)和jQuery是Web开发中常见的技术,尤其在处理AJAX(Asynchronous JavaScript and XML)请求时。JSON是一种轻量级的数据交换格式,它允许开发者以JavaScript对象表示法来存储和传输...

    jquery json分页实例

    在IT行业中,jQuery和JSON是两个非常重要的技术概念,它们在网页开发中起着至关重要的作用。本实例将深入探讨如何使用jQuery实现基于JSON的无刷新分页功能,这是一种提高用户体验的有效方法,因为它允许用户在不重新...

    JQuery getJSON() 调用Servlet简单例子

    `getJSON()`是jQuery提供的一个便捷方法,用于通过Ajax请求获取JSON格式的数据。在这个例子中,我们将深入探讨如何使用jQuery的`getJSON()`函数与Servlet进行交互。 首先,我们来看`getJSON()`的基本用法。`getJSON...

    Jquery ajax json 总结

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

    28_JQuery的JSON支持

    jQuery对JSON的支持是其强大功能之一,使得开发者能够方便地处理JSON数据,无论是从服务器获取数据还是向服务器发送数据。 首先,jQuery提供了`$.getJSON()`函数,这是一个简便的方法用于发送异步GET请求到服务器并...

    详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()

    在深入探讨Jquery中的Ajax函数之前,我们先简要了解Ajax(Asynchronous JavaScript and XML)的概念。Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这使得Web应用程序可以更加流畅地运行,...

    Jquery解析json

    ### Jquery解析json #### 知识点概览 1. **JSON介绍** 2. **jQuery与JSON数据交互** 3. **Struts2框架简介** 4. **JSON类库的选择与使用** 5. **服务器端Java程序编写** 6. **前端jQuery解析JSON数据** #### JSON...

    JqueryJson

    jQuery的`$.getJSON()`函数可以轻松实现JSONP请求,只需提供一个回调函数名,jQuery会自动生成动态脚本标签并注入到页面中,从而实现跨域数据获取。 3. **序列化与反序列化**: jQuery的`$.param()`方法可以将...

Global site tag (gtag.js) - Google Analytics