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

海欣海夜

2011-10-18

关注关注

参考资料

1jQueryajax-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

3JQuery解析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,orhtml）。

这是一个缩写的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数据的格式

请参见文章

jqueryajaxdataType为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网站定义的格式才能执行

xml语言 jquery data url encodeuri