json学习和前端交互

##json的定义
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。(摘自维基百科)

##后端和前端的分离
使用json可以更好的去传输和接收数据，并使用了ajax的更新方式，在进行交互之前，首先需要做的准备是对服务器进行配置，然后进行一步一步的交互，我试着从前端请求到后端相应的思路去书写这篇博客
首先书写前端的界面，这里要写的是用户的管理，使用的是json的包装，效果如下
而是用的是包装类。代码如下

<script type="text/javascript">
		$(function(){
			$('#dg').datagrid({   
				//url地址改为请求categoryAction
			    url:'user_queryJoinForder.action',
			    loadMsg:'Loading......',
			    queryParams:{name:''},//这里不需要传具体的name，因为我们要显示所有的
			    //width:300,
			    fitColumns:true,//水平自动展开，如果设置此属性，则不会有水平滚动条，演示冻结列时，该参数不要设置
			    //显示斑马线
			    striped:true,
			    //当数据多的时候不换行
			    nowrap:true,
			    singleSelect:false, //如果为真，只允许单行显示，全显功能失效
			    //设置分页
			    pagination:true,
			    //设置每页显示的记录数，默认是10个
				pageSize:5,
				//设置可选的每页记录数，供用户选择，默认是10,20,30,40...
				pageList:[5,10,15,20],
				idField:'id',//指定id为标识字段，在删除，更新的时候有用，如果配置此字段，在翻页时，换页不会影响选中的项

				//toolbar定义添加、删除、更新按钮以及搜索框
				toolbar: [{
					iconCls: 'icon-add',
					text:'添加用户',
					handler: function(){
						parent.$("#win").window({
							title:"添加用户",
							width:650,
							height:600,
							content:'<iframe src="send_user_save.action" frameborder="0" width="100%" height="100%"/>'
						});
					}
				},'-',{
					iconCls: 'icon-edit',
					text:'更新用户',
					handler: function(){
						//判断是否有选中行记录，使用getSelections获取选中的所有行
						var rows = $("#dg").datagrid("getSelections");
						if(rows.length == 0) {
							//弹出提示信息
							$.messager.show({ //语法类似于java中的静态方法，直接对象调用
								title:'错误提示',
								msg:'至少要选择一条记录',
								timeout:2000,
								showType:'slide',
							});
						}else if(rows.length != 1) {
							//弹出提示信息
							$.messager.show({ //语法类似于java中的静态方法，直接对象调用
								title:'错误提示',
								msg:'每次只能更新一条记录',
								timeout:2000,
								showType:'slide',
							});
						} else{
							//1. 弹出更新的页面
							parent.$("#win").window({
								title:"更新用户",
								width:650,
								height:600,
								content:'<iframe src="send_user_update.action" frameborder="0" width="100%" height="100%"/>'
							});

						}
					}
				},'-',{
					iconCls: 'icon-remove',
					text:'删除用户',
					handler: function(){
						//判断是否有选中行记录，使用getSelections获取选中的所有行
						var rows = $("#dg").datagrid("getSelections");
						//返回被选中的行，如果没有任何行被选中，则返回空数组
						if(rows.length == 0) {
							//弹出提示信息
							$.messager.show({ //语法类似于java中的静态方法，直接对象调用
								title:'错误提示',
								msg:'至少要选择一条记录',
								timeout:2000,
								showType:'slide',
							});
						} else {
							//提示是否确认删除，如果确认则执行删除的逻辑
							$.messager.confirm('删除的确认对话框', '您确定要删除此项吗？', function(r){
								if (r){
								    //1. 从获取的记录中获取相应的的id,拼接id的值，然后发送后台1,2,3,4
								    var ids = "";
								    for(var i = 0; i < rows.length; i ++) {
								    	ids += rows[i].id + ",";
								    }
								    ids = ids.substr(0, ids.lastIndexOf(","));
								    //2. 发送ajax请求
								    $.post("user_deleteByIds.action",{ids:ids},function(result){
								    	if(result == "true") {
								    		//将刚刚选中的记录删除，要不然会影响后面更新的操作
								    		$("#dg").datagrid("uncheckAll");
								    		//刷新当前页，查询的时候我们用的是load，刷新第一页，reload是刷新当前页
								    		$("#dg").datagrid("reload");//不带参数默认为上面的queryParams		
								    	} else {
								    		$.messager.show({
												title:'删除异常',
												msg:'删除失败，请检查操作',
												timeout:2000,
												showType:'slide',
											});
								    	}
								    },"text");
								}
							});
						}						
					}
				},'-',{
					text:"<input id='ss' name='serach' />"
				}],
			    rowStyler: function(index,row){
			    	console.info("index" + index + "," + row)
			    	if(index % 2 == 0) {
			    		return 'background-color:#fff;';
			    	} else {
			    		return 'background-color:#c4e1e1;';
			    	}

			    },
			    frozenColumns:[[
			        {field:'checkbox',checkbox:true},
					{field:'id',title:'用户编号',width:100}   
			    ]],
			    columns:[[
			    	   {field:'name',title:'用户名',width:200}, //
			        {field:'login',title:'账号',width:100},    
			        {field:'pass',title:'密码',width:100},
			        {field:'sex',title:'性别',width:100},
			        {field:'phone',title:'手机号码',width:100},
			        {field:'email',title:'邮箱',width:100},
			    ]]    
			});
			//把普通的文本框转化为查询搜索文本框
			$('#ss').searchbox({
				//触发查询事件
				searcher:function(value,name){ //value表示输入的值
					//alert(value + "," + name)
					//获取当前查询的关键字，通过DataGrid加载相应的信息，使用load加载和显示第一页的所有行。
					//如果指定了参数，它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法会向上面url指定的action去发送请求，从服务器加载新数据。
					$('#dg').datagrid('load',{
						name: value
					});

				},
				prompt:'请输入搜索关键字'
			});
		});
	</script>

这里使用的是javascript的对象json的键值对应的封装方式，然后打包进行数据跳转，这样能够使用ajax进行对象的更新，减少操作和效率
这样就把前端的数据給封装到一个json对象中，然后在struts中使用拦截器把关于json和关键字来进行数据获取，转移给后端的action主要配置在参考的以为大神博客里有，这里只是简单的说明下思路，后面我会给出波博客的地址
然后就是后端的处理，在这里我学会了简单的数据处理，只要把数据封装之后为json然后进行转换，就可以实现，这样我开始的时候在这里测试之后才进行数据库的连接，代码如下

//用来存储分页的数据
		pageMap = new HashMap<String, Object>();

		//根据关键字和分页的参数查询相应的数据
		List<User> user = userService.queryJoinForder(model.getName(), page, rows);
		pageMap.put("rows", user); //存储为JSON格式
		//根据关键字查询总记录数
		Long total = userService.getCount(model.getName());
//		System.out.println(total);
		pageMap.put("total", total); //存储为JSON格式

		return "jsonMap";
	}

这样就能把前端的数据传输到后端的action中，这样继续把数据传输给数据库进行操作，返回需要的数据就完成了所有的交互，这是使用了ssh的一种简单的交互过程，以前我所做的都是使用servlet的getAttrute函数直接获取属性值，这样虽然能够更加准确的去拿取数据，但是在servlet中却是存在了多个操作并发而产生数据丢失的不安全的实例，当然最主要的还是不能进行日记和数据操作的透明度，使运维和后期开发增加困难，所以我选用了ssh的学习框架，这个框架能够避免很多并发的使用问题，这也是我后期需要学习和认真总结的一些内容吧，这样我这里的学习就告一段落了，虽然在这里参考了很多别人的内容，但是确实学到了不少东西，关于懒加载，关于对基本数据的抽取，关于数据库的大小，和对jvm的一些知识，虽然只是一点点，但是我想我会有更好的方向去学习和奋斗啦。

总结

这个是这半个月的小总结吧，即是我深造的一些感悟，也是我对框架的新的理解，以前一直在探索如何去实现客户给予的功能，现在通过博客的学习，我知道我关注的不仅是业务本身，还需要考虑运维和后期的扩展需求，还需要在选择上兼顾安全的使用，而不是运行出来就完事，这样是不能够真正的去成长的，一个软件的周期不仅仅是开发出来那么简单，要使软件有更强的生命力，我们必须赋予更高的安全性和更好的体验，客户服务至上，我们不仅在提供技术，还有服务，更有我们关于软件尽善尽美的心