JSON&Ajax(语法格式+解析json)

Posted 辉常努腻

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JSON&Ajax(语法格式+解析json)相关的知识,希望对你有一定的参考价值。

1.json规则

导读模块:发展史:
21世纪初,Douglas Crockford寻找一种简便的数据交换格式,
能够在服务器之间交换数据。当时通用的数据交换语言是XML,
但是Douglas Crockford觉得XML的生成和解析都太麻烦,
所以他提出了一种简化格式,也就是Json。

JSON:是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率

简而言之:是存储数据的一种方式/格式

与之类似的技术有:xml

JSON 语法规则:
1.对象表示为键值对
2.数据由逗号分隔
3.花括号保存对象
4.方括号保存数组

例如:

{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}

那么这段json表示的意思为:中国:黑龙江 ,广东,台湾,新疆,以及他们的主要城市
ps:我们也可以用在线工具校验帮我门节省时间和力气:https://www.sojson.com/

拓展:bson
继续拓展:ProtoBuf

2.Ajax在jquery里的使用方法

2.0.Ajax的本地加载 $("#div1").load实现的方法(如果没有后台程序的时候用这个)

  1. 什么是Ajax?

是指一种创建交互式网页应用的网页开发技术
是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术

简而言之:就是异步无刷新(局部刷新)的获取数据的一种技术

参数:

  • 必需的 URL 参数规定您希望加载的 URL:统一资源定位符,可以简单的理解为是网址。

  • 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合:请求时传递的一个参数

  • 可选的 callback 参数是 load() 方法完成后所执行的函数名称

  • callback 参数规定当 load() 方法完成后所要允许的回调函数。

  • 回调函数可以设置不同的参数:

    • responseTxt - 包含调用成功时的结果内容
    • statusTXT - 包含调用的状态
    • xhr - 包含 XMLHttpRequest 对象
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>AJAX获取外部数据信息</title>
    <script src="../js/jquery.js"></script>
        <script>
        $(function(){
	    $("button").click(function()
			{
								//请求文件		//请求成功时的结果内容 	状态码  XMLHttpRequest      
		    	$("#div1").load("123.txt",function(responseTxt,statusTxt,xhr)
		    		{
						if(statusTxt=="success")
						{
						    alert("请求的内容:"+responseTxt)
						    alert("error:"+xhr.status+":"+xhr.statusText);
							}	    	    
						if(statusTxt=="error")
						{								//xhr 的 错误信息 
						    alert("状态码:"+xhr.status+":"+xhr.statusText);
						}
		    		});
			})
	})
        </script>
    </head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>

</body>
</html>

2.1通过XHR对象创建(已经过时,不推荐使用)

2.2通过Jquery实现Ajax

基本原理:.通过jquery实现Ajax

  • 在页面引入jquery.js文件
  • 在相应的位置使用即可

需求:

  • 按钮点击使用 ajax进行异步请求
  • 请求回来的数据进行解析
  • 将数据渲染成列表显示到页面中

http请求:

  • get():获取数据
  • post()提交数据

状态码:

  • 4xx 请求出了问题,提供参数,路径有问题, 假如我将文件修改为movie_list.json123,那么此时就会出现错误的状态码404
  • 5xx 服务器内部逻辑,需要开发人员自行修复bug (例如执行查询的时候,可以通过制造“2/0”这样的错误就能看到)
  • 3xx 请求转发(当执行删除,保存等操作之后因为要重定向,所以此时会通过谷歌浏览器看到先执行的状态码为302,然后为200,这就是请求转发)
  • 200:正常

ps:小结:200正确不用管,4X开头建议去页面找参数和路径,5X开头建议去后台看java代码,3X开头是转发(主要是逻辑的对与错)

步骤:

  1. 因为没有后台程序,所以此时我们用一个.json文件来充当数据来源(即是movie_list.json),并且将该文件引入到项目中

  2. 在页面中通过$.getJson来获取数据(因为我是要从.json文件中获取数据的)
    $.getJson():通过 HTTP GET 请求载入 JSON 数据。
    语法:jQuery.getJSON(url, [data], [callback])
    参数: url:发送请求地址。
    data:待发送 Key/value 参数。
    callback:载入成功时回调函数

  3. <body>中创建元素,且进行显示

     <input type="text" value="" name="" />
     <input type="button" id="get_movies" value="获取电影列表"" />
      <div id="container">
      	<!--用来展示图片的-->
      	<div class="item">
      		<img src=""  width="200px" height="200px"/>
      		<p>人行天地间,忽如远行客</p>
      	</div>
      </div>
    
  4. 对创建好的元素进行样式的设定

img{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    float: left;
}
p{
    height: 200px;
    line-height: 200px;
    float: left;
    text-align: center;
    margin: 0px;
    padding: 0px;
}
.item{
    border: 1px solid blue;
    height: 204px;
    padding: 1px;
}
  1. 在页面上引人jquery开始写ajax
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../jquery/jquery.js" ></script>
		<style type="text/css">
			   img{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				float: left;
			}
			p{
				height: 200px;
				line-height: 200px;
				float: left;
				text-align: center;
				margin: 0px;
				padding: 0px;
			}
			.item{
				border: 1px solid blue;
				height: 204px;
				padding: 1px;
			}
			
		</style>
		<script type="application/javascript">
			$(document).ready(function(){
				
				$("#get_movies").click(function (){
					alert("开始ajax");
					$.getJSON("movie_list.json",function(data)
					{
					 alert(data.movies[0].img);	 
					 alert("data.movies.length:"+data.movies.length);	 
						 for (var i = 0; i < data.movies.length; i++)
						 {
							var	$img=$("<img src='../img/02.jpg' width='200px' height='200px' />")
				            var $p= $("<p></p>")
				            $img.attr("src",data.movies[i].img);//给img标签设置src属性值
				            $p.text(data.movies[i].tittle)//给p标签设置文本值
				            var	$item=$("<div class='item'></div>")//创建一个div标签
				            $item.append($img).append($p)//将新创建的img标签和段落p标签追加到新创建的div标签中
				            $("#container").append($item)//将div追加到id值为container的div中
					    }
					})										
				})				
			})		
		</script>
	</head>
	<body>
		   <!--
           	作者:offline
           	时间:2019-12-09
           	描述:之所以写69行的目的是为了给学生演示一下,当开启ajax请求的时候69行中的文本值没有丢失,又一次验证ajax是异步局部刷新的
           -->
		  <input type="text" value="" name="" />
		<input type="button" id="get_movies" value="获取电影列表"" />
	  <div id="container">
	  	<!--用来展示图片的-->
	  	<div class="item">
	  		<img src=""  width="200px" height="200px"/>
	  		<p>人行天地间,忽如远行客</p>
	  	</div>
	  </div>
	</body>
</html>

2.3.jquery$.post实现ajax请求

/*$.post(url,params,callback); 第一种:采用post方式提交,中文参数无需转码,在callback中如果要获取json字符串,还需转换一下(但是今天的例子是中没有的,稍后会再将json的)
示意代码:*/
alert("开始请求Ajax");
var gname=$("#gname").val();
alert("管理员姓名:"+gname);
var url="<%=request.getContextPath() %>/manager.do?method=queryAjax";
alert("请求的URl:"+url);

$.post(url,{manager_name:gname},function (data){
    alert("data:"+data);
    tianxie(data);
});	

2.4.jquery$.getJSON加载本地json

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="<%=request.getContextPath()%>/js/jQuery/jquery-1.4.4.js" type="text/javascript"></script>
<style type="text/css">
			
			  img{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				float: left;
			}
			p{
				height: 200px;
				line-height: 200px;
				float: left;
				text-align: center;
				margin: 0px;
				padding: 0px;
			}
			.item{
				border: 1px solid blue;
				height: 204px;
				padding: 1px;
			}
		</style>	
		<script type="application/javascript">
			$(document).ready(function(){
				$("#get_movies").click(function (){
							//获取本地json 			回调函数的 返回数据
				    $.getJSON("movie_list.json",function(data)
					{
					 alert(data.movies[0].img);	 
					 alert("data.movies.length:"+data.movies.length);	 
						 for (var i = 0; i < data.movies.length; i++)
						 {
							var	$img=$("<img src='' width='200px' height='200px' />")
				            var $p= $("<p></p>")
				            $img.attr("src",data.movies[i].img);//给img标签设置src属性值
				            $p.text(data.movies[i].tittle)//给p标签设置文本值
				            var	$item=$("<div class='item'></div>")//创建一个div标签
				            $item.append($img).append($p)//将新创建的img标签和段落p标签追加到新创建的div标签中
				            $("#container").append($item)//将div追加到id值为container的div中
					    }
					})
				})
			})
		</script>
<body>
	 <input type="text" value="" name="" />
		<input type="button" id="get_movies" value="获取电影列表"" />
	  <div id="container">
	  	<!--用来展示图片的-->
	  	<div class="item">
	  		<img src=""  width="200px" height="200px"/>
	  		<p>人行天地间,忽如远行客</p>
	  	</div>
	  </div>
</body>
</html>	

2.5.jquery解析后台servlet传来的数据

servlet

	/**
	 * @desc 2.查询全部
	 * @param request
	 * @param response
	 * @throws SQLException 
	 * @throws ClassNotFoundException 
	 * @throws IOException 
	 * @throws ServletException 
	 */
	private void query(HttpServletRequest request, HttpServletResponse response) throws ClassNotFoundException, SQLException, ServletException, IOException {
		   List<Map<String, Object>> list=managerService.queryAll();
		   String jsonStr=jsonOut(list);
		  // request.setAttribute("list", list);
		   //request.getRequestDispatcher("/manage/manager/list.jsp").forward(request, response);
		   
		   System.out.println("jsonStr:"+jsonStr);
		   PrintWriter out = response.getWriter();
		   out.write(jsonStr);
		   out.flush();
		   out.close();
	}
	/**
	 * @desc  将数据转变为json格式
	 * @param obj
	 * @return
	 * @throws IOException 
	 * @throws JsonMappingException 
	 * @throws JsonGenerationException 
	 */
	private String jsonOut(Object obj) throws JsonGenerationException, JsonMappingException, IOException {
	
		//1.实例化JackSon包中的核心类
		ObjectMapper om=new ObjectMapper();
		 //writeValue(参数,obj):直接将传入的对象序列化为json,并且返回给客户端
		 //writeValueAsString(obj):将传入的对象序列化为json,返回给调用者
	    String json = om.writeValueAsString(obj);
		
		return json;
	}

html

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta 以上是关于JSON&Ajax(语法格式+解析json)的主要内容,如果未能解决你的问题,请参考以下文章

JSON&AJAX

AJAX

利用fastjson解析json并通过js&ajax实现页面的无跳转刷新

JavaScript之Ajax-Json

Ajax —— Ajax接收JSON数据

AJAX初识