目录:(Ctrl+F进行检索)
1.javascript中底层的ajax异步请求后台操作的方法与实例。
2.jquery对ajax的各种操作方法
3.ajax详解
4.json详解
5.java中对json的处理。
6.java将json数据传值前台。
7.jsp前台对json进行处理。
8.ajax异步获取到后台的json并进行处理。
--------------------------------------------
1.传统的 ajax异步请求后台操作的方法。
特点:javascript中的局部刷新,异步交互。
传统的写法:
1 <script type="text/javascript"> 2 function createXMLHttpRequest() {//为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。 3 //如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject : 4 //第一步创建XMLHttpRequest() 5 try { 6 xmlHttp = new XMLHttpRequest(); 7 } catch (tryMS) { 8 try { 9 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 10 } catch (otherMS) { 11 try { 12 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 13 } catch (failed) { 14 xmlHttp = null; 15 // 这里可以报一个错误,无法获得 XMLHttpRequest对象 16 } 17 } 18 } 19 return xmlHttp; 20 } 21 window.onload = function() { 22 document.getElementById("b1").onclick = function() { 23 //调用AJAX发送请求 24 /** 25 * 1.创建xmlHttpRequest对象 26 * 2.绑定回调函数 27 * 3.与服务器建立连接 28 * 4.发送数据 29 * 5.回调函数处理相应的数据 30 */ 31 //第一步:创建XMLHttpRequest对象,往上看怎么验证浏览器支持的↑ 32 var xmlHttp = createXMLHttpRequest(); 33 34 //第二步:绑定回调函数 35 36 xmlHttp.onreadystatechange = function() { 37 if (xmlHttp.readyState == 4) { 38 //表示readyState的状态已经在第四步,数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据, 39 //ajax readyState的五种状态详解请看这篇。传送门:http://www.jb51.net/article/16966.htm 40 if (xmlHttp.status == 200) {//http状态码为200表示正常交互完成。 41 //两步都验证过了则可以设置回调函数 42 var callback = xmlHttp.responseText; 43 //如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 44 //responseText是获得字符串形式的响应数据。responseXML则获得 XML 形式的响应数据。 45 document.getElementById("myDiv").innerHTML = callback;//这里就可以预设值对回调函数的处理。比如这里把回调函数展示到 id为myDiv的标签中。 46 } 47 } 48 } 49 //第三步:与服务器建立连接 50 xmlHttp.open("POST", "../servlet/AjaxServlet", true); 51 //第一个参数是请求的类型,get或者post,但是get会取得缓存的数据,get携带数据量有限,get对大量未知字符输入时不稳定,有以上三点障碍时,请选择POST; 52 //第二个参数是请求的地址url,这个 地址可以请求任何类型的文件如.txt .xml 或者是.js ,为了防止虚拟路径问题,建议使用el表达式动态获取地址,把url修改为:“${pageContext.request.contextPath}/servlet/AjaxServlet”。再者,如果担心get请求取得了缓存数据,可以让地址每次都不一样就获取不到缓存了,比如这样写:“${pageContext.request.contextPath}/servlet/AjaxServlet?t=”+Math.random()。 53 //第三个参数是设置async 参数,true为异步请求,false为同步请求,false请求时会导致浏览器锁住,等数据处理完才能操作页面。而且,当您使用 async=false 时,请不要编写 onreadystatechange 函数,把代码放到 send() 语句后面即可。就是说上面的document.getElementById("myDiv").innerHTML=callback;把这一段放到send后面。 54 //第四步:向服务器发送请求 55 xmlHttp.setRequestHeader("CONTENT-TYPE", 56 "application/x-www-form-urlencoded");//向请求添加 HTTP 头。可以添加多个。自行百度。 57 xmlHttp.send("name=张三");//send中的string是在请求正文里,只在post的时候用,get的话就空着,因为例子是post请求的数据,所以这里写了一个例子。 58 } 59 } 60 </script>
底层ajax案例:
案例1:底层ajax用get获取.txt文件
txt文件放在WebRoot文件夹内,.txt内容为:
1 <p id="txt1" style="color:red">woshi yiduan txt wenben !</p> 2 <p id="txt2">woshi dier duan txt wenben !</p>
js代码:
1 <script type="text/javascript"> 2 function createXMLHttpRequest() { 3 try { 4 xmlHttp = new XMLHttpRequest(); 5 } catch (tryMS) { 6 try { 7 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 8 } catch (otherMS) { 9 try { 10 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 11 } catch (failed) { 12 xmlHttp = null; 13 // 这里可以报一个错误,无法获得 XMLHttpRequest对象 14 } 15 } 16 } 17 return xmlHttp; 18 } 19 window.onload = function() { 20 document.getElementById("bt1").onclick = function() { 21 var xmlHttp = createXMLHttpRequest(); 22 xmlHttp.onreadystatechange = function() { 23 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 24 document.getElementById("myDiv").innerHTML = xmlHttp.responseText; 25 } 26 } 27 28 xmlHttp.open("GET", 29 "${pageContext.request.contextPath}/test/test.txt?t=" 30 + Math.random(), true); 31 32 xmlHttp.setRequestHeader("CONTENT-TYPE", 33 "application/x-www-form-urlencoded"); 34 xmlHttp.send(); 35 } 36 } 37 </script> 38 39 40 </head> 41 42 <body> 43 44 <div id="myDiv"> 45 <h2>通过 AJAX 改变文本</h2> 46 </div> 47 <button id="bt1">改变内容</button> 48 49 </body>
展示结果:
说明:
内容怎么会有颜色变化呢?因为,responseText属性包含了从服务器返回的文字信息。这些信息其实就是所请求的页面,我们的xmlHttp.responseText是可以自动识别标签,所以我们也可以根据标签或者属性进行部分取值,自己百度研究。
这里要注意的是,一个正常页面是有格式要求的,一旦不符合标签规范,就会引发“未知运行期错误”,假设文本中包含<html></html>标签,你想想<div></div>标签中能嵌套<html></html>标签吗?
还有一个中文乱码问题!为啥我txt不用中文要写拼音,因为我英语不好,呸!因为我还不会处理中文乱码 o(╥﹏╥)o,有大神会的评论里稍稍指点一下呗,或者给个传送门。
-------------------
案例2:底层ajax获取xml文件;
了解一下xml先,xml不知道怎么操作的话,学什么ajax,滚回去复习基础!
简单概括:
- XML 指可扩展标记语言(EXtensible Markup Language)
- XML 是一种标记语言,很类似 HTML,但不是HTML的替代。
- XML 的设计宗旨是传输数据,而非显示数据
- XML 标签没有被预定义。您需要自行定义标签。就是说可以自己发明标签
- XML 被设计为具有自我描述性。
- XML 是 W3C 的推荐标准。
- XML仅仅是纯文本。
- XML无所不在。
摘自w3school.com;
准备xml文件,比如:test.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <CATALOG> 3 <CD> 4 <TITLE>Empire Burlesque</TITLE> 5 <ARTIST>Bob Dylan</ARTIST> 6 <COUNTRY>USA</COUNTRY> 7 <COMPANY>Columbia</COMPANY> 8 <PRICE>10.90</PRICE> 9 <YEAR>1985</YEAR> 10 </CD> 11 <CD> 12 <TITLE>Hide your heart</TITLE> 13 <ARTIST>Bonnie Tyler</ARTIST> 14 <COUNTRY>UK</COUNTRY> 15 <COMPANY>CBS Records</COMPANY> 16 <PRICE>9.90</PRICE> 17 <YEAR>1988</YEAR> 18 </CD> 19 <CD> 20 <TITLE>Greatest Hits</TITLE> 21 <ARTIST>Dolly Parton</ARTIST> 22 <COUNTRY>USA</COUNTRY> 23 <COMPANY>RCA</COMPANY> 24 <PRICE>9.90</PRICE> 25 <YEAR>1982</YEAR> 26 </CD> 27 <CD> 28 <TITLE>Still got the blues</TITLE> 29 <ARTIST>Gary Moore</ARTIST> 30 <COUNTRY>UK</COUNTRY> 31 <COMPANY>Virgin records</COMPANY> 32 <PRICE>10.20</PRICE> 33 <YEAR>1990</YEAR> 34 </CD> 35 <CD> 36 <TITLE>Eros</TITLE> 37 <ARTIST>Eros Ramazzotti</ARTIST> 38 <COUNTRY>EU</COUNTRY> 39 <COMPANY>BMG</COMPANY> 40 <PRICE>9.90</PRICE> 41 <YEAR>1997</YEAR> 42 </CD> 43 </CATALOG>
javascript代码:
1 <script type="text/javascript"> 2 window.onload = function() { 3 document.getElementById("bt1").onclick = function() { 4 var xmlHttp; 5 if (window.XMLHttpRequest) 6 {// code for IE7+, Firefox, Chrome, Opera, Safari 7 xmlHttp=new XMLHttpRequest(); 8 } 9 else 10 {// code for IE6, IE5 11 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 12 } 13 xmlHttp.onreadystatechange = function() { 14 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 15 xmlDoc=xmlHttp.responseXML; 16 17 document.write("<table border='1'>"); 18 var x=xmlDoc.getElementsByTagName("CD"); 19 for (i=0;i<x.length;i++) 20 { 21 document.write("<tr><td>"); 22 document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue); 23 document.write("</td><td>"); 24 document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue); 25 document.write("</td></tr>"); 26 } 27 document.write("</table>"); 28 29 } 30 } 31 32 xmlHttp.open("GET", 33 "${pageContext.request.contextPath}/test/test.xml?t=" 34 + Math.random(), true); 35 36 xmlHttp.setRequestHeader("CONTENT-TYPE", 37 "application/x-www-form-urlencoded"); 38 xmlHttp.send(); 39 } 40 } 41 </script> 42 43 44 </head> 45 46 <body> 47 48 <div id="myDiv"> 49 <h2>通过 AJAX 改变文本</h2> 50 </div> 51 <button id="bt1">改变内容</button> 52 53 </body>
执行结果:
说明:
xml编辑成HTML真的很麻烦啊很麻烦,,回调函数里写了一堆就是处理xml数据的东西,说技术含量也没什么技术含量,细心就可以了,码农啊!码农。
验证浏览器的部分怎么和之前不一样了呢?这样写也是可以的啦!try-catch当然 更高级了,但是谁去写啊,复制就行,都一样!
-----------------------------------------------
3.jquery的ajax异步请求。
说明:
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
提示:如果没有 jQuery,AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。
前提:
引入jquery.js:
<script type="text/javascript" src="http://libs.cdnjs.net/jquery/3.2.1/jquery.js"></script>
这是前端公共库CDN加速的远程仓库,当然也可以下载相关js文件然后引入,但必须是1.4以上的版本。以前的版本几乎没人用了,不知道会出现什么诡异的问题。
学习jquery技术。查着用着也行。
案例1:最简单的jquery load()方法
准备.txt文本,如:test.txt;
1 <p id="txt1" style="color:red">woshi yiduan txt wenben !</p> 2 <p id="txt2" style="color:green">woshi dier duan txt wenben !</p>
jsp中的jquery代码:
1 <script type="text/javascript"> 2 $().ready(function(){ 3 $("#bt1").click(function(){ 4 $("h2").load("./test/test.txt"); 5 }); 6 }); 7 </script> 8 </head> 9 <body> 10 <div id="myDiv"> 11 <h2>通过 AJAX 改变文本</h2> 12 </div> 13 <button id="bt1">改变内容</button> 14 </body>
执行结果:
说明:
该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单:
就是说如果$()里面的"h2"如果没有这个标签就不会执行,
并且如果使用的是数据的对象,就使用POST方法,否则就使用get方法。
案例2:
我们可以把 jQuery 选择器添加到 URL 参数。
把 "test.txt" 文件中 id="txt2" 的元素的内容,加载到指定的元素中。
准备.txt文本,同上。
准备jsp中的jquery代码:
1 <script type="text/javascript"> 2 $().ready(function(){ 3 $("#bt1").click(function(){ 4 $("h2").load("${pageContext.request.contextPath}/test/test.txt #txt2"); 5 }); 6 }); 7 </script> 8 </head> 9 <body> 10 <div id="myDiv"> 11 <h2>通过 AJAX 改变文本</h2> 12 </div> 13 <button id="bt1">改变内容</button> 14 </body>
执行结果取到了想要的数据:
说明:
没啥说的。
---------------------------------
案例 3:ajax的$.load()方法获取并设置xml文档。
准备.xml文档: 如:test.xml:
1 <?xml version="1.0" encoding="utf-8"?> 2 <CATALOG> 3 <CD> 4 <TITLE>Empire Burlesque</TITLE> 5 <ARTIST>Bob Dylan</ARTIST> 6 <COUNTRY>USA</COUNTRY> 7 <COMPANY>Columbia</COMPANY> 8 <PRICE>10.90</PRICE> 9 <YEAR>1985</YEAR> 10 </CD> 11 <CD> 12 <TITLE>Hide your heart</TITLE> 13 <ARTIST>Bonnie Tyler</ARTIST> 14 <COUNTRY>UK</COUNTRY> 15 <COMPANY>CBS Records</COMPANY> 16 <PRICE>9.90</PRICE> 17 <YEAR>1988</YEAR> 18 </CD> 19 <CD> 20 <TITLE>Greatest Hits</TITLE> 21 <ARTIST>Dolly Parton</ARTIST> 22 <COUNTRY>USA</COUNTRY> 23 <COMPANY>RCA</COMPANY> 24 <PRICE>9.90</PRICE> 25 <YEAR>1982</YEAR> 26 </CD> 27 <CD> 28 <TITLE>Still got the blues</TITLE> 29 <ARTIST>Gary Moore</ARTIST> 30 <COUNTRY>UK</COUNTRY> 31 <COMPANY>Virgin records</COMPANY> 32 <PRICE>10.20</PRICE> 33 <YEAR>1990</YEAR> 34 </CD> 35 <CD> 36 <TITLE>Eros</TITLE> 37 <ARTIST>Eros Ramazzotti</ARTIST> 38 <COUNTRY>EU</COUNTRY> 39 <COMPANY>BMG</COMPANY> 40 <PRICE>9.90</PRICE> 41 <YEAR>1997</YEAR> 42 </CD> 43 </CATALOG>
准备jsp中的jquery代码:
1 <script type="text/javascript"> 2 $().ready(function(){ 3 $("#bt1").click(function(){ 4 $("#myDiv").load("${pageContext.request.contextPath}/test/test.xml",function(response,status,xhr){ 5 if (status=="success"){ 6 $("div").html("<ol></ol>"); 7 $(response).find("artist").each(function(){ 8 var item_text = $(this).text(); 9 $('<li></li>').html(item_text).appendTo('ol'); 10 }); 11 } 12 }); 13 }); 14 }); 15 16 </script> 17 </head> 18 <body> 19 <div id="myDiv"> 20 <h2>通过 AJAX 改变文本</h2> 21 </div> 22 <button id="bt1">改变内容</button> 23 </body>
展示结果:
说明:
jquery操作起来是不是 看着简单点了。其实我弄了三个小时才搞好!原因是$.load("url",function(response,status,xhr){}),就是这个回调函数中的xhr,xhr代表XMLHttpRequest对象,我一直试图使用这个用DOM来处理xml文档,进行table的展示,结果一直报Cannot read property 'getElementsByTagName' of undefined 错误,实在忍无可忍,就放弃了。。。哈哈,哪位大神能用 xhr处理一下,贴评论里我看看呗,谢谢了。
$().load()里还有一个参数是data, 就是同ajax请求过去的参数,后台做选择判断,这个没啥说的吧。。。
额,说一下吧,就是这种格式 {"name":"小猪佩奇","age":"4"},
数据使用的POST 形式发送的附加参数里,
ajax案例:jquery中的$.ajax()方法
案例1:简单的$.ajax()读取.txt文档。
说明:看懂了上面的$().load()方法的话,这个应该就容易理解一些了。
准备.txt 文本,同上
准备jsp中的代码:
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 $("#bt1").click(function(){ 4 htmlobj=$.ajax({url:"${pageContext.request.contextPath}/test/test.txt",async:false}); 5 $("#myDiv").html(htmlobj.responseText); 6 }); 7 }); 8 </script> 9 </head> 10 <body> 11 <div id="myDiv"> 12 <h2>通过 AJAX 改变文本</h2> 13 </div> 14 <button id="bt1">改变内容</button> 15 </body>
执行结果:
说明:
这是一个简单的ajax请求,但是ajax的[settings]里的async参数要设置成false同步请求才能这样操作上面的文本。那ajax就没什么用了?
$.ajax()中有非常多的参数,组成了一个settings,翻译过来就算作配置文件,这样更好理解一些,
要认识这些参数,我们可以看官方文档,传送门:http://www.w3school.com.cn/jquery/ajax_ajax.asp;
我们也可以看大神更直接的解释,传送门:http://blog.csdn.net/qq_27093465/article/details/49799341;
里面最难理解的算是options参数,这个跨域请求的东西要在实战中体会,我自己也不太理解。但并不影响我们今天研究和核心。我们略过。
下面我们看一个例子,简单的ajax异步请求,要怎么写:
案例2:ajax设置settings参数进行异步请求逻辑处理
准备前台jsp:
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 $("#bt1").click(function(){ 4 $.ajax({ 5 url:"${pageContext.request.contextPath}/ajaxtes?t="+Math.random(), 6 data:{username:"海绵宝宝"}, 7 success:function(say){ 8 $("h2").text(say); 9 } 10 }); 11 }); 12 }); 13 </script> 14 </head> 15 <body> 16 <div id="myDiv"> 17 <h2>通过 AJAX 改变文本</h2> 18 </div> 19 <button id="bt1">改变内容</button> 20 </body>
准备java后台数据:
1 public class ajaxtes extends HttpServlet { 2 3 public void doGet(HttpServletRequest request, HttpServletResponse response) 4 throws ServletException, IOException { 5 response.setContentType("text/html;charset=utf-8");//处理响应乱码 6 String username = request.getParameter("username");//手动编解码处理乱码 7 byte[] bytes = username.getBytes("iso8859-1"); 8 username = new String(bytes,"utf-8"); 9 if(username.equals("海绵宝宝")){ 10 response.getWriter().print("我是一串密码"); 11 }else{ 12 response.getWriter().print("用户名不存在,不告诉你密码"); 13 } 14 15 } 16 17 public void doPost(HttpServletRequest request, HttpServletResponse response) 18 throws ServletException, IOException { 19 doGet(request, response); 20 } 21 22 }
执行结果:
因为ajax参数中的async参数默认是true异步请求,可以不用写,type默认是get请求,也不用写, data就会被默认追加在url后面,形成上面那样,当然中间做了一些乱码处理,这都是小事情。
从这上面我们可以看出,我们使用jquery中的ajax方法可以很简单的实现ajax异步请求的处理。当然还有好几个ajax方法比如$.get 或者$.post,这都属于上层的代码了,写法更为简单易懂。
互联网上还有很多变种的ajax,可以自行学习研究,比如中国的前端框架validform,也做了一些ajax的处理,但是底层还是与我们这些代码息息相关。
----------------------------------------
---------------------------------
2.json
说明:JSON是一种数据交互的格式.
数据的交互格式:
1.xml
标签是成对出现的
xml中的格式对对固定,不允许修改.
如果对于数据要求较为严格时,首选xml(报文)
2.JSON
JSON是一种轻量级的数据交互格式.
在传输过程中,只需要传递有效信息.
对于数据要求相对宽松,并且传递速度较快时.
JSON格式说明:
array数组格式:
["value1","value2","value3"]
Object对象格式:
{"id":"1","name":"tom"}
复杂格式:
A:["value1","value2",{"id":1,"name":"tom"}]
B:[{id:"1",name:"tom"},{id:2,name:"jerry"},{id:3,name:"herry"}]
语法:
如果value值是数字。可以不加""号,如果value值是字符,必须加""号,对于key而言,(注意是key!就是对象格式!),加不加""号都可以。
以上JSON格式要牢记!牢记!牢记!重要的事情说三遍。实在记不住,就都加上引号!
-------------------------
3.java中数据转json格式的方法
第一种:String类型,
我们可以直接按着json格式写出一个字符串,这这个字符串就是json。
如:String json = {"book1":[{"yema":"12","neirong":"文绉绉"},{"页码":"22","neirong":"侠客片段"}],"book2":[{"页码":"1","内容":"爱情片段"},{"页码":"5","neirong":"恐怖片段"}]};
但是!直接这样写在java里是不行的,因为""会编译错误,需要用\号对每个“号进行转义,
这里有一个网站可以快速转义,传送门:http://www.sojson.com/yasuo.html;
在转义后是这样的:
String json="{\"book1\":[{\"yema\":\"12\",\"neirong\":\"文绉绉\"},{\"页码\":\"22\",\"neirong\":\"侠客片段\"}],\"book2\":[{\"页码\":\"1\",\"内容\":\"爱情片段\"},{\"页码\":\"5\",\"neirong\":\"恐怖片段\"}]}";
看。这一段放在java中就没问题了。在编译后\斜杠会自动为"双引号进行转义后会显示成一个正常的json串。
第二种:数组类型
我们可以使用json-lib的jar包,把其他格式轻松的转换为json串,jar包可以自行下载,我使用的是这些:
java数组转json串:
1 String[] str={"张三","李四","王五","赵六"}; 2 System.out.println(Arrays.toString(str)); 3 //将数组转化成json串 4 JSONArray json = JSONArray.fromObject(str); 5 System.out.println(json);
执行结果:
可以看出,这里我们已经成功的转出了json串,格式也是符合json要求的。
第三种:集合类型
java集合转json串:
1 List<String> list = new ArrayList<String>(); 2 list.add("一"); 3 list.add("二"); 4 list.add("三"); 5 list.add("四"); 6 System.out.println(list); 7 //将List转换为json串 8 JSONArray json = JSONArray.fromObject(list); 9 System.out.println(json);
执行结果:
可见转换的格式也符合了json串的要求。
第四种:map类型:
java中map代码
1 Map<String, Object> map = new HashMap<String, Object>(); 2 map.put("name", "张三"); 3 map.put("age", "18"); 4 map.put("gender", "男"); 5 map.put("job", "程序猿"); 6 System.out.println(map); 7 //map转json串 8 JSONObject json = JSONObject.fromObject(map); 9 System.out.println(json);
执行结果:
成功。
第五种,对象转json
java代码:
1 User user = new User(); 2 user.setUsername("张三"); 3 user.setPassword("123"); 4 user.setAge(12); 5 user.setGender("男"); 6 user.setJob("程序猿"); 7 System.out.println(user); 8 //对象转json串 9 JSONObject json = JSONObject.fromObject(user); 10 System.out.println(json);
执行结果:
神奇不神奇?
当然我们还可以针对某个元素进行转化。如
------------------------------------------------------------
json串转对象的方法:
java代码:
1 String json = "{\"age\":12,\"gender\":\"男\",\"job\":\"程序猿\",\"password\":\"123\",\"username\":\"张三\"}"; 2 JSONObject fromObject = JSONObject.fromObject(json); 3 User user = (User)JSONObject.toBean(fromObject, User.class); 4 System.out.println(user); 5 System.out.println(user.getAge());
执行结果:
看,对象数据已经封装进去了。
----------------------------------------------------------------
我们先在jsp上做一个简单的json操作,
案例1:解析json对象类型
准备jsp内容:
1 <script type="text/javascript"> 2 $().ready(function(){ 3 var jsonObject = {"name":"pxf","age":"22","address":"beijing","photo":"12356"}; 4 $("#jname").html(jsonObject.name); 5 $("#jage").html(jsonObject.age); 6 $("#jstreet").html(jsonObject.address); 7 $("#jphone").html(jsonObject.photo); 8 }); 9 </script> 10 </head> 11 <body> 12 <h2>在 JavaScript 中创建 JSON 对象</h2> 13 14 <p> 15 Name: <span id="jname"></span><br /> 16 Age: <span id="jage"></span><br /> 17 Address: <span id="jstreet"></span><br /> 18 Phone: <span id="jphone"></span><br /> 19 </p> 20 </body>
展示结果:
看,js能很容易的解析出对象类型的json,因为json的写法和js对象的写法是一模一样的。
案例2: 解析json数组类型:
准备jsp页面:
1 <script type="text/javascript"> 2 $().ready(function(){ 3 var jsonArray=["pxf","22","beijing","12355"]; 4 $("#jname").html(jsonArray[0]); 5 $("#jage").html(jsonArray[1]); 6 $("#jstreet").html(jsonArray[2]); 7 $("#jphone").html(jsonArray[3]); 8 }); 9 </script>
执行结果:
执行成功。
案例3:将json文本转化为jquery对象。
这是最重要的了,我们所学json的目的就是讲服务器传送的json转换成js对象。
我们做一个json的字符串作为模拟后台传来的json字符串。
准备jsp页面:
1 <script type="text/javascript"> 2 $().ready( 3 function() { 4 var txt = '{ "employees" : [{ "firstName":"Bill" , "lastName":"Gates" },' 5 + '{ "firstName":"George" , "lastName":"Bush" },' 6 + '{ "firstName":"Thomas" , "lastName":"Carter" } ]}'; 7 var obj = eval("(" + txt + ")"); 8 $("#fname").html(obj.employees[0].firstName); 9 $("#lname").html(obj.employees[0].lastName); 10 }); 11 </script> 12 </head> 13 <body> 14 <h2>在 JavaScript 中创建 JSON 对象</h2> 15 16 <p> 17 First Name: <span id="fname"></span><br /> 18 Last Name: <span id="lname"></span><br /> 19 </p> 20 </body>
执行结果:
说明:
由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:
这个 eval() 中的俩()括号 非常重要!!!非常重要!!!非常重要!!!!
虽然eval很强大,但是由于他能够处理所有的javascript代码。这么强大的功能就有了安全隐患,所有js有一个专门的方法来处理json,就是JSON.parse(json);
我们把上面的eval()替换为JSON.parse(txt);执行后效果是一样的。而且避免了安全隐患。
当然我们学习jquery的话就用jquery的方法来处理,jquery有一个方法是 $.parseJSON(json);用这个替换上面两个也是可以的。
--------------------------------
当然我们还可以使用javascript 中的 JSON.stringify() 函数对js字符串,对象,数组,等进行json格式转化。便于向后台传输数据,此函数的具体解释看这里: http://www.runoob.com/js/javascript-json-stringify.html,
或者看这里:传送门:http://blog.csdn.net/qq_24122593/article/details/53046525
--------------------------------------------------------------
那了解到这里,我们下面开始用ajax对json串的发送与接收操作了。
案例1:ajax接收后台传来的json串;
准备jsp代码:
1 <script type="text/javascript"> 2 $().ready(function(){ 3 $("#button").click(function(){ 4 $.ajax({ 5 url:"${pageContext.request.contextPath}/ajaxtest", 6 type:"GET", 7 datatype:"json", 8 success:function(mapss){ 9 var jsonmap=$.parseJSON(mapss); 10 $.each(jsonmap,function(is,vs){ 11 $("#"+is).html(vs); 12 }); 13 } 14 }); 15 }); 16 }); 17 </script> 18 </head> 19 20 <body> 21 <button id="button">点我</button> 22 <div id="div"><h2>json数据处理</h2></div> 23 用户名:<span id="username"></span><br/> 24 密码:<span id="password"></span> 25 </body>
准备java代码:
1 HashMap<String, Object> map = new HashMap<String, Object>(); 2 map.put("username", "pxf"); 3 map.put("password", "mima"); 4 JSONObject json = JSONObject.fromObject(map); 5 response.getWriter().print(json);
执行结果:
其中这里最重要的就是 var jsonmap=$.parseJSON(mapss); 这一段,这一段是将后台callback回来的json格式转化为js对象,如果json格式不转成javascript对象的话,一切都白扯。