利用jquery如何从json中读取数据追加到html中

前端之家收集整理的这篇文章主要介绍了利用jquery如何从json中读取数据追加到html中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JSON 格式

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

JSON 格式说明

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

1.下载安装jquery

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

参考安装文档:

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

例如下面是result.json的格式

登录","moudle":"Login","pass":"false","log":"asserterrorlog","failurereason":{ "errorlog":"asserterror","errorimg":"./登录.jpg" } } ] }

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

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

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

元素定位方式

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

插入html内容位置:

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

Json数据的操作

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

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

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

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

(jquery需要写在

名称 名称

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

原文链接:https://www.f2er.com/jquery/34922.html

猜你在找的jQuery相关文章