Jquery get方法的注意点

参考资料
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代码
Js代码  收藏代码
  1. $("#btnAjaxGet").click(function(event)  
  2. {  
  3. var username = encodeURI(encodeURI($("#username").val()));  
  4. var content = encodeURI(encodeURI("中国"));     
  5. $.get("jqueryGet?username=" + username + "&content="+content+"&timestamp=" + (new Date()).getTime(),function(data){  
  6.   // decodeURI(data),后台没有经过java.net.URLDecoder.decode(tt, "UTF-8");就使用这个方法在解码一次,否则直接就是data                         
  7.      $('#divResult').html(decodeURI(data));                        
  8.   });  
  9. });  

后台代码
Java代码  收藏代码
  1. PrintWriter out = response.getWriter();  
  2. response.setContentType("text/html;charset=UTF-8");  
  3. String info = "";         
  4. String tt = (String) request.getParameter("username");  
  5. String username = java.net.URLDecoder.decode(tt, "UTF-8");  
  6. String cc = request.getParameter("content");  
  7. String content = java.net.URLDecoder.decode(cc, "UTF-8");             
  8. info = "<div class='comment'><h2> " +  tt + " </h2><p class='para'> " + cc + " </p></div>";  
  9. out.println(info);  
  10. out.flush();  
  11. out.close();  

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

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

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

后台代码
Java代码  收藏代码
  1. PrintWriter out = response.getWriter();  
  2. response.setContentType("text/xml");          
  3. String tt = (String) request.getParameter("username");  
  4. String username = java.net.URLDecoder.decode(tt, "UTF-8");  
  5. String cc = request.getParameter("content");  
  6. String content = java.net.URLDecoder.decode(cc, "UTF-8");  
  7. StringBuilder xml = new StringBuilder();  
  8. xml.append("<?xml version='1.0' encoding='UTF-8'?>");  
  9. xml.append("<comments>");  
  10. xml.append("<comment username='" + tt + "'>");  
  11. xml.append("<content>" + cc + "</content>");  
  12. xml.append("</comment>");  
  13. xml.append("</comments>");          
  14. String info = xml.toString();  
  15. out.println(info);  
  16. out.flush();  
  17. 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 请加上响应内容类型
Java代码  收藏代码
  1. response.setContentType("application/json");  

必须具备以上这二点,jQuery才会正常工作 .
前台代码如下:
Js代码  收藏代码
  1. $("#send").click(function(){                          
  2.     var username = encodeURI($("#username").val());   
  3.     var content = encodeURI("中国");                             
  4.     $.get("jqueryGet", {"username": username,"content":content}, function (data, textStatus){                                
  5.                 
  6.                 var username = data.username;  
  7.                 var content = data.content;                                   
  8.                 username =  decodeURI(username);  
  9.                 content = decodeURI(content);                                     
  10.                 var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";  
  11.     $("#resText").html(txtHtml);   
  12.     });  
  13. })  

后台代码如下:
Java代码  收藏代码
  1. response.setContentType("application/json");  
  2. String username = request.getParameter("username");  
  3. String content = request.getParameter("content");  
  4. String result = "{\"username\" : \""+username+"\" , \"content\" : \""+content+"\"}";   
  5. System.out.println(result);  
  6. out.println(result); 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值