ajax与json实战
目录：（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对象的话，一切都白扯。
