jquery读取json的数据使用到html里

这次给大家带来jquery读取json的数据使用到html里,jquery读取json的数据使用到html里的注意事项有哪些,下面就是实战案例,一起来看一下。

JSON 格式

json 是 Ajax 中使用频率最高的数据格式,在浏览器和服务器中之间的通讯可离不开它。

JSON 格式说明

需要特别注意的是,在 JSON 中的属性名是需要使用引号引起来的。

1.下载安装jquery

可通过下面的方法引入在线版本的js:


登录后复制

参考安装文档:http://www.jb51.net/zt/jquerydown.htm

2.准备一个json格式的文件,后缀可以不是.json

例如下面是result.json的格式

{ "title":"【UI测试结果】-转转2017/1/23 14:47", "starttime":"2017/1/23 15:00 45", "endtime":"2017/1/23 15:01 42", "passcount":10, "failurecount":5, "resultinfo":[ { "name":"发布", "moudle":"Publish", "pass":"true", "onecepass":"true", "log":"true" }, { "name":"登录", "moudle":"Login", "pass":"false", "onecepass":"true", "log":"asserterrorlog", "failurereason":{  "errorlog":"asserterror",  "errorimg":"./登录.jpg"  } } ]}

登录后复制

3.通过$.getJSON获得Json文件的数据

例如下面的例子:读取result.json文件的内容,存储到result变量中,结果是一个json格式

$.getJSON('./result.json',function(result){}

登录后复制

4.通过【$(‘#元素id’).after(html内容);】将html内容添加到定位到的元素后面

元素定位方式

$("#id"):定位到id,$(“p"):定位到标签p,其他标签同理$(“.class”):定位到class

登录后复制

插入html内容位置:

append() – 在被选元素的结尾插入内容

prepend() – 在被选元素的开头插入内容

after() – 在被选元素之后插入内容

before() – 在被选元素之前插入内容

Json数据的操作

JSON对象[key]来读取内容:result[‘title’],或者用result.”title”

数组的对象值,可以通过$.each来获得数据:

$.each(JSON数组对象,function(遍历索引i,遍历对象){操作遍历的对象})

读取result.json,追加html的代码如下

(jquery需要写在标签内)

 New Document $(document).ready(function(){//使用getJSON方法读取json数据,//注意:info.json可以是不同类型文件,只要其中的数据为json类型即可 $.getJSON('./result.json',function(result){ var html_title=''; var html_resultinfo='';  html_title += ''+result["title"]+''; $('#resultitle').after(html_title); $.each(result["resultinfo"],function(i,item){ if(item["pass"]=="true") { html_resultinfo += '' + item['name'] + '' + '' + item['moudle'] + '' + '' + item["pass"] + '' + '' + item['onecepass'] + '' + '展开'; html_resultinfo +='' + item['log'] + ''; }$('#infotitle').after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。 });}); 

用例名称 模块名称 是否成功 一次成功 详情

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

立即学习“前端免费学习笔记(深入)”;

jQuery怎么动态操控页面元素

jquery怎么配置webpack

jQuery EasyUI操作折叠面板accordion详细步奏

以上就是jquery读取json的数据使用到html里的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2770526.html

(0)
上一篇 2025年3月8日 12:37:24
下一篇 2025年3月8日 12:37:31

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • jQuery zTree在异步过程中重复添加子节点

    这次给大家带来jquery ztree在异步过程中重复添加子节点,处理jquery ztree在异步过程中重复添加子节点的注意事项有哪些,下面就是实战案例,一起来看一下。 zTree 简介     zTree 是一个依靠 jQuery 实现…

    编程技术 2025年3月8日
    200
  • jQuery实现图标显示隐藏切换

    这次给大家带来jQuery实现图标显示隐藏切换,jQuery实现图标显示隐藏切换的注意事项有哪些,下面就是实战案例,一起来看一下。 HTML代码: jq隐藏显示图标切换 这里是要显示或隐藏的内容        登录后复制  JS代码: $(…

    编程技术 2025年3月8日
    200
  • 用jQuery实现在前端搜索

    这次给大家带来用jQuery实现在前端搜索,用jQuery实现在前端搜索的注意事项有哪些,下面就是实战案例,一起来看一下。 html代码: 工程轻量化与可靠性技术实验室 应用流体学 2015-7-8这里是文章的标题1 2015-7-8这里是…

    编程技术 2025年3月8日
    200
  • jquery选中下拉框中值统计到文本框

    这次给大家带来jquery选中下拉框中值统计到文本框,jquery选中下拉框中值统计到文本框的注意事项有哪些,下面就是实战案例,一起来看一下。 具体代码如下: jQuery添加下拉框元素 请选择 layer form layim添加 var…

    编程技术 2025年3月8日
    200
  • jQuery的prev()使用详解

    这次给大家带来jQuery的prev()使用详解,jQuery的prev()使用注意事项有哪些,下面就是实战案例,一起来看一下。 prev() 函数被用来匹配元素集的前一个兄弟元素,仅仅只有前一个兄弟元素被选择,其子元素将被忽略。这里给大家…

    编程技术 2025年3月8日
    200
  • jQuery判断是否浏览到网页底部

    这次给大家带来jQuery判断是否浏览到网页底部,jQuery判断是否浏览到网页底部的注意事项有哪些,下面就是实战案例,一起来看一下。 有些需求中,需要当用户滚动到浏览器底部的时候,再加载新的内容。笔者在这里介绍如何使用Jquery判断用户…

    编程技术 2025年3月8日
    200
  • jquery使用iscorll实现手机端中上拉加载下拉刷新

    这次给大家带来jquery使用iscorll实现手机端中上拉加载下拉刷新,jquery使用iscorll实现手机端中上拉加载下拉刷新的注意事项有哪些,下面就是实战案例,一起来看一下。 实现原理是:判断fiiptop,flipdown是否显示…

    编程技术 2025年3月8日
    200
  • 在jquery中怎么使用键盘事件

    这次给大家带来在jquery中怎么使用键盘事件,在jquery中使用键盘事件的注意事项有哪些,下面就是实战案例,一起来看一下。 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1.  keydown()…

    编程技术 2025年3月8日
    200
  • jQuery实现回到顶部功能

    这次给大家带来jQuery实现回到顶部功能,jQuery实现回到顶部功能的注意事项有哪些,下面就是实战案例,一起来看一下。 回到顶部 body{ width: 100%; height: 10000px; } #totop{ width: …

    编程技术 2025年3月8日
    200
  • jQuery做出页面遮罩层效果

    这次给大家带来jQuery做出页面遮罩层效果,jQuery做出页面遮罩层效果的注意事项有哪些,下面就是实战案例,一起来看一下。 遮罩层 .fh-link-bar { border-top: none; } .fh-link-bar { ba…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论