json 及 Ajax 简单总结

json

一种数据格式,类似 xml (按层级表示对象,及对象之间的层级关系),也是表示对象,属性,json 相对于xml 格式  非常轻量级  很适合服务器与JavaScript 之间的交互。

           在json 中:【】--数组集合    { }--对象

                               数据主要以键值对形式存在 name:value   各个数据用逗号隔开

                               对象里面可以有对象、属性、集合等等

 将对象转换成 json 字符串 通过发送请求----返回 json字符串来耦合 前后台的分离, 返回数据(必须定义属性完成传值)给页面 ,json 没有作用域(及内置对象request、session等等)的概念;通过请求对象来实现功能,返回大量数据。

一般执行流程:

引入插件使用json 字符串:struts-json-plugin.jar

1>.只需要根据标签的name 属性定义 在后台定义对应属性,并生成get()/set()方法就可以完成后台和页面的数据获取,并不需要 通过 内置对象 间接进行获取。 所以说没有json 没有作用域 的概念;

2>.需要在后台定义json 字符串,生成get()/set() 方法,将需要传递的数据放进json字符串中;

3>.在struts.xml中将定义的 json字符串配置进去,result  的type 属性有 json 类型,可以接收Json 字符串,会将一个json类型的字符串输出给浏览器(不需要跳转页面 或者action);

4>当Ajax请求成功时,前台将会获取到后台传过来的数据(json 字符串对象,需要将其转换成JavaScript对象 3种方式),即success:function(data)----data数据

struts.xml配置

对象转为json字符串:

(1).字符串拼接 (网上有很多json解析工具可以用来检验拼接是否正确)

(2).JSONObject 构造

 将json 字符串转换为JavaScript 对象:3种方式

Ajax:

json 主要配合Ajax应用程序使用,方便快捷,引入jquery 写ajax ,实现ajax返回json字符串数据

ajax 实际上是源码 JavaScript脚本语言

Ajax各个参数及含义:

异步调用:指的是Ajax 不关系数据是什么 什么时候来,只是进行功能操作(如url请求后在网络控制台请求了服务器--触发浏览器核心 告诉浏览器我要做什么--最后得到浏览器响应的请求状态 200 ,202 ,500等等)

实现两步走:《1》发送请求,《2》浏览器调用回调函数

回调函数我自己创建一个函数但是我不用,用于给别人调用返回我需要的数据给我。如果你发出了一个请求,

                    及时处理--(直接给你返回结果)

                    延时处理--(可以调用回调函数将结果返回给你)

例如:支付宝转账时,正常情况你会收到一条转账状态信息,但是如果你刚转账完之后手机断网,还没有来得及收到状态信息,这时支付宝就会调用该回调函数,给你返回处理结果。

Ajax的回调函数时给浏览器用--浏览器返回数据给Ajax。。。

实例代码:

<script type="text/javascript">
  
  $(function(){
	  
	  $("#sumbittest").click(function()
	  {
		  alert(1);
		  var username=$("#username").val();
		  alert(username);
		  
		  //alert(99);
		  
		  $.ajax({
		 		url:"loginwho",//发送请求的地址(默认当前页地址)
		 		type:"POST",
		 		dataType:"json",
		 		data:{"user.username":$("#username").val(),"user.password":$("#password").val()},
		 		success:function(data){
		 			//利用js的最老的方式eval这个函数
		 		        var datainfo = 	eval('('+data+')');
		 			//利用jequy的json对象的转换方法,转换
		 			var object = $.parseJSON(data);
		 			//利用其他前端框架的转换方法。
					alert(object.info);
		 			
		 			alert("登录成功");
	 				window.location.href="page/index.jsp";
					
		 		},
		 		error:function(){
		 				
		 		}	
					
		 	});  
	  });
	  
  });
  		
  </script>
  

ps:json和Ajax的使用,极大的方便了大量数据传递,页面只需要加载一次,后面刷新加载数据即可,提高效率!

猜你喜欢

转载自blog.csdn.net/weixin_42249629/article/details/81293456
今日推荐