Home >Web Front-end >JS Tutorial >Use jquery to read data from json and append it to html to implement the method
Use jquery to read data from json and append it to html to implement the method
- 小云云Original
- 2018-01-05 17:51:471392browse
This article mainly introduces you to the relevant information on how to use jquery to read data from json and append it to html. The article introduces it in detail through sample code. It has certain reference learning value for everyone's study or work. It needs Friends, let’s take a look with the editor below.
JSON format
Json is the most frequently used data format in Ajax, and communication between the browser and the server is inseparable from it.
JSON Format Description
It is important to note that attribute names in JSON need to be enclosed in quotation marks.
1. Download and install jquery
You can introduce the online version of js through the following method:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
Refer to the installation documentation: http://www .jb51.net/zt/jquerydown.htm
2. Prepare a file in json format. The suffix may not be .json
. For example, the following is the format of 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. Obtain the data of the Json file through $.getJSON
For example, the following example: read the content of the result.json file and store it in the result variable, The result is a json format
$.getJSON('./result.json',function(result){}
4. Add the html content after the positioned element through [$('#element id').after(html content);]
Element positioning method
$("#id")：定位到id，
$(“p")：定位到标签p，其他标签同理
$(“.class”)：定位到class
Insert html content position:
- ##append() - Insert content at the end of the selected element
- prepend() - Insert content at the beginning of the selected element
- after() - Insert content after the selected element
- before() - Insert content before the selected element
| 用例名称 | 模块名称 | 是否成功 | 一次成功 | 详情 |
|---|