精华内容
下载资源
问答
  • 如何在页面显示json数据

    千次阅读 2018-11-05 15:26:00
    1.方法: syntaxHeightlight(json) { if (typeof json !... json = JSON.stringify(json, undefined, 2) } json = json.replace(/&/g, '&').replace(/</g, '<').replace(/...

    1.方法:

    syntaxHeightlight(json) {
      if (typeof json !== "string") {
        json = JSON.stringify(json, undefined, 2)
      }
      json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g,
        '>');
      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'key';
          } else {
            cls = 'string';
          }
        } else if (/true|false/.test(match)) {
          cls = 'boolean';
        } else if (/null/.test(match)) {
          cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
      });
    }
    

     2.在html里面添加一个区域:

    <pre id="result">
    </pre>

    3.调用该方法:

    $('#result').html(syntaxHighlight(data));

     

     

     

    转载于:https://www.cnblogs.com/xieli26/p/9909366.html

    展开全文
  • 在项目中我们需要将json数据直接显示在页面上,但是如果直接显示字符串很不方便查看,下面小编给大家带来了html中显示JSON数据的方法,需要的的朋友参考下吧
  • 页面JSON数据格式化显示

    万次阅读 2017-04-19 15:01:43
    html页面在后台获取json格式的字符串,在页面显示的并没有经过格式化,看起来不方便,看对比图: 源代码 var json = $('#detail').val(); var result = JSON.stringify(JSON.parse(json), null, 4); $('#...

    html页面在后台获取json格式的字符串,在页面中显示的并没有经过格式化,看起来不方便,看对比图:
    这里写图片描述
    这里写图片描述
    源代码

    <script>
        var json = $('#detail').val();
        var result = JSON.stringify(JSON.parse(json), null, 4);
        $('#detail').val(result);
    </script>
    <p>
        <label>user:</label>
    </p>
    <p>
        <textarea id="detail" readonly="readonly">${detail}</textarea>
    </p>

    说明:1、由于我的json内容是后台传过来的,大家可以将${detail}换成json格式的字符串试试:var json = '{"...":"...",...}';
    2、后台传String类型的字符串,不要用JSONObject封装为json,要不然会报错。

    链接: https://segmentfault.com/q/1010000003839950

    展开全文
  • 今天小编就为大家分享一篇jQuery中将json数据显示页面表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使IE显示JSON数据

    2014-08-23 09:19:01
    测试时候,如果IE不显示JSON格式的数据,那么请执行该注册文件。
  • json数据在Html页面,采用光标事件格式化展示,方便用户查看对比接口文档
  • jsp页面展示json数据

    千次阅读 2016-03-22 15:56:19
    在JSP页面中输出JSON格式数据 JSON-taglib是一套使在JSP页面中输出JSON格式数据的标签库。 JSON-taglib主页: http://json-taglib.sourceforge.net/index.html JAR包下载地址: ...

    在JSP页面中输出JSON格式数据

    JSON-taglib是一套使在JSP页面中输出JSON格式数据的标签库。

    JSON-taglib主页: http://json-taglib.sourceforge.net/index.html
    JAR包下载地址: http://sourceforge.net/projects/json-taglib/files/latest/download

    使用方法:
    1、下载json-taglib.jar,将其放到WEB-INF/lib目录
    2、在jsp页面中做如下声明:
    <%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %>
    3、JSON-taglib主要利用json:array,json:object和json:property来实现数据格式的转换

    快速用例:
    JSP如下:

    复制代码
        <%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %>  
        <json:object>  
          <json:property name="itemCount" value="${cart.itemCount}"/>  
          <json:property name="subtotal" value="${cart.subtotal}"/>  
          <json:array name="items" var="item" items="${cart.lineItems}">  
            <json:object>  
              <json:property name="title" value="${item.title}"/>  
              <json:property name="description" value="${item.description}"/>  
              <json:property name="imageUrl" value="${item.imageUrl"/>  
              <json:property name="price" value="${item.price}"/>  
              <json:property name="qty" value="${item.qty}"/>  
            </json:object>  
          </json:array>  
        </json:object>  
    复制代码

    产生JSON如下:

    复制代码
        {  
          itemCount: 2,  
          subtotal: "$15.50",  
          items:[  
            {  
              title: "The Big Book of Foo",  
              description: "Bestselling book of Foo by A.N. Other",  
              imageUrl: "/images/books/12345.gif",  
              price: "$10.00",  
              qty: 1  
            },  
            {  
              title: "Javascript Pocket Reference",  
              description: "Handy pocket-sized reference for the Javascript language",  
              imageUrl: "/images/books/56789.gif",  
              price: "$5.50",  
              qty: 1  
            }  
          ]  
        }  
    展开全文
  • Json的全称:JavaScriptObjectNotation Json的两种构建结构:“名称/值”对的集合、值的有序列表。 ...移动客户端(android和iphone)接收返回的数据...JSON数据格式: JSON对象是一个无序的“‘名称/值’对”集

    Json的全称:JavaScriptObjectNotation


    Json的两种构建结构:“名称/值”对的集合、值的有序列表。


    移动客户端(android和iphone)接收返回的数据和平台无关,平台可以是Java、.net或者php。
    移动客户端请求服务器端,一般是采用Json这种轻量级的形式。


    JSON的数据格式:
    JSON对象是一个无序的“‘名称/值’对”集合。
    一个对象以“{”(左括号)开始,“}”(右括号)结束。
    每个“名称”后跟一个“:”(冒号);“‘名称/值’对”之间使用“,”(逗号)分隔。
    如:{
           "name":"jackson",
           "age":100
        }
    数组是值(value)的有序集合。一个数组以“[”(左括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔
    如:{
            “students”:
            [
                {"name":"jackson","age":100},
                {"name":"michael","age":51}
            ]
        }


    这个例子采用的是服务器端:(jsp+servlet)(生成Json的字符串),客户端:解析Json数据。在网页上显示Json的字符串。

    整体思路:新建一个web工程,定义一个实体类Person,在里面定义三个字段,定义它的构造函数,get、set方法,toString方法。定义一个JsonService类,在里面定义getPerson方法返回一个Person对象,定义getlistPerson方法返回一个装有Person类型的List对象,定义getListString方法返回一个装有字符串类型的List对象,定义getListMaps方法返回一个装有Map类型的List对象。定义一个JsonTools类,在里面写一个构建Json字符串的方法。定义一个TestJson类,在里面定义main方法,在这个方法中调用createJsonString返回Json对象并输出。定义一个servlet类JsonAction,在里面把doGet方法中的代码改为this.doPost(request, response),在doPost方法中添加请求和接收的方式,调用createJsonString返回Json对象并输出。

    Person.java文件:

    public class Person {
    
    	private int id;
    	private String name;
    	private String adress;
    
    	public Person(int id, String name, String adress) {
    		super();
    		this.id = id;
    		this.name = name;
    		this.adress = adress;
    	}
    
    	public Person() {
    		// TODO Auto-generated constructor stub
    	}
    
    	public int getId() {
    		return id;
    	}
    
    	public void setId(int id) {
    		this.id = id;
    	}
    
    	public String getName() {
    		return name;
    	}
    
    	public void setName(String name) {
    		this.name = name;
    	}
    
    	public String getAdress() {
    		return adress;
    	}
    
    	public void setAdress(String adress) {
    		this.adress = adress;
    	}
    
    	@Override
    	public String toString() {
    		return "Person [id=" + id + ", name=" + name + ", adress=" + adress
    				+ "]";
    	}
    
    }
    

    JsonService.java文件:

    public class JsonService {
    
    	public JsonService() {
    		// TODO Auto-generated constructor stub
    	}
    	
    	public Person getPerson(){
    		Person person =new Person(1001,"jack","beijing");
    		return person;
    		
    	}
    	
    	public List<Person> getlistPerson(){
    		List<Person> list=new ArrayList<Person>();
    		Person person1=new Person(1001,"jack","beijing");
    		Person person2=new Person(1001,"rose","shanghai");
    		list.add(person1);
    		list.add(person2);
    		
    		return list;
    	}
    	
    	public List<String> getListString(){
    		List<String> list=new ArrayList<String>();
    		list.add("北京");
    		list.add("上海");
    		list.add("广州");
    		return list;
    	}
    
    	public List<Map<String, Object>> getListMaps(){
    		List<Map<String, Object>> list=new ArrayList<Map<String,Object>>();
    		Map<String, Object> map1=new HashMap<String, Object>();
    		map1.put("id", 1001);
    		map1.put("name", "jack");
    		map1.put("address", "beijing");
    		Map<String, Object> map2=new HashMap<String, Object>();
    		map2.put("id", 1002);
    		map2.put("name", "rose");
    		map2.put("address", "shanghai");
    		list.add(map1);
    		list.add(map2);
    		return list;
    	}
    }
    

    JsonTools.java文件:

    public class JsonTools {
    
    	public JsonTools() {
    		// TODO Auto-generated constructor stub
    	}
    	/**
    	 * 
    	 * @param key  表示json字符串的头信息
    	 * @param value  是对解析的集合的类型
    	 * @return
    	 */
    	public static String createJsonString(String key,Object value){
    		 JSONObject jsonObject=new JSONObject();
    		 jsonObject.put(key, value);
    		 return jsonObject.toString();
    		 
    	}
    
    }
    TestJson.java文件:
    public class TestJson {
    
    	public TestJson() {
    		// TODO Auto-generated constructor stub
    	}
        
    	public static void main(String[] args) {
    		String msg="";
    		JsonService service=new JsonService();
    //		Person person=service.getPerson();
    //		msg=JsonTools.createJsonString("person", person);
    //		System.out.println(msg);
    		msg=JsonTools.createJsonString("persons", service.getListMaps());
    		System.out.println(msg);
    	}
    }
    

    JsonAction.java文件:

    public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    
    		this.doPost(request, response);
    	}
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    
    		response.setContentType("text/html;charset=utf-8");
    		request.setCharacterEncoding("utf-8");
    		response.setCharacterEncoding("utf-8");
    		
    		PrintWriter out = response.getWriter();
    		String jsonString=JsonTools.createJsonString("person", service.getlistPerson());
    		out.println(jsonString);
    		out.flush();
    		out.close();
    	}
    







    展开全文
  • json数据在html页面展示并格式化 一、展现效果图 描述信息: key值全部采用红色标出,表示重要参数; value值采用不同颜色标出,数值类型的采用橘黄色,字符串采用绿色,布尔采用蓝色。。。 二、源代码展示 <...
  • ajax页面传参 json数据渲染页面

    千次阅读 2017-12-07 09:08:40
    ajax在两个页面之间进行传参操作一个页面获取值 并将获取的值 通过ajax传递到后台 并将数据返回的数据进行后台渲染
  • 3.然后刷新一下网页页面,就会显示这个网页嗅探到的一些文件,只需要单击小放大镜,然后输入你需要搜索的数据(可以是JSON里面的数据或者文件名)注意Network模式 单击上图第三步骤,就会发现右手方框框里出现一...
  • jquery.json-viewer, 用于显示JSON数据的jQuery插件 jQuery浏览器JSON浏览器是一个jQuery插件,它可以通过将JSON对象转化为HTML来轻松显示JSON对象。功能:语法高亮显示在单击时折叠和展开子节点可以点击链接易于...
  • js显示json数据

    千次阅读 2015-07-16 11:38:26
    json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。 复制代码 代码如下: $.getJSON(url,[data],[callback]) url:加载的页面地址 data: 可选项,发送到服务器的数据,格式是...
  • jsp页面根据json数据动态生成table

    万次阅读 2014-09-03 19:02:54
    对于java后台传给jsp页面json形式的数据
  • jQuery中将json数据显示页面表格

    万次阅读 2017-07-31 21:23:38
    jQuery中将json数据显示页面表格代码。stu模拟的就是一个数据库,假设我们的数据已经是json 的文件格式,接下来就是将这个json文件里面的数据显示页面的表格上。<!DOCTYPE html> <title></title> ...
  • 前端获取JSON数据显示页面

    万次阅读 2019-06-04 15:11:34
    从后台获取数据显示在界面上是前端开发所必须要掌握的一项基本技能,简单记录一下从本地模拟数据JSON文件中获取数据显示在界面上。 1.先创建本地json文件,命名为data.json,json文件存储数据格式如下: { ...
  • 最近遇到一个问题,就在在测试的时候需要在页面中快捷显示servlet传过来的json数据,快捷显示,可使用JSON.stringify();将json对象转换为json字符串;
  • 提交按钮后会跳转到相关接口url,展示json数据,我不想让它跳转到其他页面就在当前页面展示获取到的json数据 该如何实现呢,新手小白。跪求大神教育
  • json数据展现页面

    2015-09-20 14:21:51
    这个是一个小项目的json数据,是展是界面用的,项目中需要的
  • 过程描述:页面 A输入参数,进入controller进行逻辑处理并生成json数据,然后通过 MVC返回json数据,并对页面A相关easyui datagrid表格进行数据展示。 问题:easyui datagrid不现实数据,且页面不报错,调试能...
  • ajax接收json数据页面显示

    千次阅读 2018-05-16 16:43:59
    json"说明返回值类型为json(也可以为xml/html/script/jsonp/text)$("#input").val(data.col); $("#div").html("col1:"+data.col1+" "+"col2:"+data.col2)...
  • 我的浏览器是360的,之前google浏览器也用过格式化显示json的扩展插件,忘了叫什么,自己去扩展中心找找 浏览器扩展中心, 搜索 json 找到 iFormatTool ,点击安装即可 刷新下要显示格式化json的页面,如下: ...
  • 谷歌浏览器格式化显示json数据

    千次阅读 多人点赞 2019-01-25 12:16:21
    一般谷歌浏览器显示json数据会显示乱码: 我们可以使用一个很好用的小插件 安装步骤如下: 1.插件下载地址 2.使用谷歌浏览器访问:chrome://extensions/ 打开开发者模式,将插件拖入浏览器界面便可直接安装 安装后的...
  • html页面展示json数据并格式化

    万次阅读 2018-11-01 10:14:31
    json数据在html页面展示并格式化 一、展现效果图 描述信息: key值全部采用红色标出,表示重要参数; value值采用不同颜色标出,数值类型的采用橘黄色,字符串采用绿色,布尔采用蓝色。。。 二、源代码展示 &...
  • vue格式化显示json数据

    千次阅读 2019-10-03 21:44:24
    已经是json格式数据的,直接用标签 <pre></pre>展示。 参考:https://www.jianshu.com/p/d98f58267e40 转载于:https://www.cnblogs.com/dannyyao/p/10186671.html
  • 在开发中遇到一个需求,需要把查出来的数据通过点击事件异步显示页面上去,由于用到的框架是springboot,也没多想就直接去用thymeleaf了.结果就是model可以放进去,页面就是取不出来.后来才明白,这根本就是两码事,...
  • 页面接收后台json数据显示[object Object]解决方法

    万次阅读 热门讨论 2018-05-16 15:04:21
    data--&gt;JSON.stringify(data);

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 191,742
精华内容 76,696
关键字:

页面显示json数据