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实现的方法(如果没有后台程序的时候用这个)

什么是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;
}

在页面上引人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 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>

3.java数据转json格式

将对象转为json字符串时可以使用ObjectMapper中的两个方法：

writeValue（参数，obj）：直接将传入的对象序列化为json，并且返回给客户端writeValueAsString（obj）：将传入的对象序列化为json，返回给调用者

区别：

writeValueAsString（obj）

//1.实例化JackSon包中的核心类
    ObjectMapper om=new ObjectMapper();
Map<String,Object> map = new HashMap<String,Object>();
ObjectMapper mapper=new ObjectMapper();
String josn = mapper.writeValueAsString(map );
response.getWriter().write(josn);

writeValue（参数，obj）

//1.实例化JackSon包中的核心类
    ObjectMapper om=new ObjectMapper();
Map<String,Object> map = new HashMap<String,Object>();
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getOutputStream(),map);

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

1.json规则

2.Ajax在jquery里的使用方法

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

2.1通过XHR对象创建（已经过时，不推荐使用）

2.2通过Jquery实现Ajax

2.3.jquery$.post实现ajax请求

2.4.jquery$.getJSON加载本地json

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

3.java数据转json格式

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

1.json规则

2.Ajax在jquery里的使用方法

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

2.1通过XHR对象创建（已经过时，不推荐使用）

2.2通过Jquery实现Ajax

2.3.jquery$.post实现ajax请求

2.4.jquery$.getJSON加载本地json

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

3.java数据转json格式

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像