jQuery之get(txt,xml,json二点注意事项)
程序员文章站
2022-06-10 09:38:19
...
参考资料
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代码
后台代码
二 返回文本类型,通过jQuery提供的方法传递参数,请注意和上一个方法传递参数时的编码转换
后台代码同上
三 返回文本类型,通过回调函数
前台代码
后台代码同上
四 返回XML类型
前台代码
后台代码
五 返回JSON类型
特别说明:后台返回JSON类型要注意二点
1 使用jQuery1.4+的版本要注意组装JSON数据的格式
请参见文章
jquery ajax dataType为json的问题
http://makecompany.iteye.com/blog/923669
JSON格式总结下,详细的去json.org查看。
1)键名称:用双引号括起
2)字符串:用使用双引号括起
3)数字,布尔类型不需要使用双引号括起.
2 请加上响应内容类型
必须具备以上这二点,jQuery才会正常工作.
前台代码如下:
后台代码如下:
特别说明:在jQuery权威指南示例中,使用的是jQuery1.3.1版本,返回JSON格式不严格,在jQuery1.4+以上的版本必须满足json.org网站定义的格式才能执行
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+"×tamp=" + (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网站定义的格式才能执行