关于AJAX和JSON解析

关于使用AJAX

• AJAX通过 HTTP 请求加载远程数据。
• AJAX请求适合提交数据并展示后台返回的处理信息的时候。
• AJAX可以在不刷新页面的情况下执行数据请求或者提交数据等操作。

AJAX好处

使用AJAX，用户对Web的体验会更“敏捷”：数据提交页面不会闪屏；页面局部更新速度快； 网络带宽占用低；

用法

通常将ajax写于js方法中,定义事件,让元素触发,触发之后就会有数据产生给服务端

$.ajax({
                       url:'     ',   //路径
                       type:'POST',    //请求类型 
                       dataType:'json',   //传入数据类型
                       data: '      ',  //传入数据  
                      success:function (data) {  //括号里的data为返回数据 

                                    
                       },
                       error:function () {
                               $.messager.show({
                                       title:'提示',
                                       msg:'失败'
                               });
                       }
    });

因为success 请求成功之后调用。传入返回后的数据，以及包含成功代码的字符串。
传回来的是字符串 如果传过来的是对象，或者集合类型的参数，这时候就需要用到我们的json解析，来处理返回的数据 ， 我们先来看一下json串的格式：

[{"children":[{"children":[],"id":2,"pid":1,"text":"人事一部"}],"id":1,"pid":0,"text":"人事部"},
{"children":[{"children":[],"id":4,"pid":3,"text":"财务一部"},
{"children":[],"id":5,"pid":3,"text":"财务二部"},
{"children":[],"id":6,"pid":3,"text":"财务三部"}],"id":3,"pid":0,"text":"财务部"},
{"children":[{"children":[],"id":8,"pid":7,"text":"就业一部"},
{"children":[],"id":9,"pid":7,"text":"就业二部"},
{"children":[],"id":10,"pid":7,"text":"就业三部"},
{"children":[],"id":11,"pid":7,"text":"就业四部"}],"id":7,"pid":0,"text":"就业部"},
{"children":[],"id":59,"pid":0,"text":"蒋蒋"}]

不难看出其中的每个{ }里面的内容即为一个对象处理后的字符串
可以通过下面的方法把数据解析成json串

String stringJSON = JSON.toJSONString(参数); 

通过ajax使用json串

$.ajax(
				{
					type:"POST",
					url: "http://localhost:8080/KQSYS/DepartmentController/queryAllDepartmentsForTree",
					dataType: "json" ,
					success : function(data)
					{
					 var html="";
						$.each(data , function(index){
						 	html += "<fieldset><legend style='font-size:17px;font-weight:bold;'>"+data[index].text+"</legend>";
					 		$.each(data[index].children,function(i){
					 			html += "<fieldset style = 'width:85%; margin:20px auto;'>";
					 			html += "<legend style='font-size:17px;font-weight:bold;'>"+data[index].children[i].text+"</legend>";
					 			html += "<div class='formDiv01 formDiv02'>";
					 			var tag = 0;
					 			
					 			
					 			eval( "var jsonData = " +attTodayDate );
					 			$.each(jsonData,function(j){
					 				if(jsonData[j].twoName == data[index].children[i].text)
						 			{
						 				html += "<label>" + jsonData[j].employeeName +"("+jsonData[j].typeName+")"+"&nbsp;&nbsp;&nbsp;</label>";	
						 				tag ++;
						 			}
					 			});
					 			if( tag == 0 )
					 			{
					 				html += "<p style='width:200px;margin:10px auto;text-algin:center'>暂无当日数据</p>";
					 				
					 			} 
					 			html += "</div></fieldset>";
					 		});
					 		if( data[index].children.length == 0 )
					 		{
					 			html += "<p style='width:200px;margin:10px auto;text-align:center'>暂无数据</p>";
					 		}
					 		html += "</fieldset>";
						});	
						$("#attenInfo").html(html);
					},
					error:function()
					{
						$.messager.alert('提示','加载部门信息失败');
					}
				}
			);

效果图如上所述，动态插入div 。 循环遍历插入数据。
有错误请指出，谢谢您。