How to append read data to html (detailed tutorial)

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, which has certain reference value for everyone's study or work. , friends who need it, please follow the editor to take a look.

JSON format

json is the most frequently used data format in Ajax, and is inseparable from the communication between the browser and the server. Open 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 document ://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 contents of the result.json file and store it in the result variable. The result is a json format

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

4. Through [$('#element id').after(html Content);] Add html content after the positioned element

Element positioning method

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

Insert html content position:

• append() - Insert content at the end of the selected elements

• prepend() - Insert content at the beginning of the selected elements

• after() - Insert content after the selected element

• before() - Insert content before the selected element

Json data operation

JSON object [key] to read the content: result['title'], or use the object value of the result."title"

array, you can pass $.each to get the data:

$.each(JSON array object,function(traversal index i, traversal object){operate the traversed object})

Read result.json, append The html code is as follows

(jquery needs to be written in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag)

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
//使用getJSON方法读取json数据,
//注意：info.json可以是不同类型文件，只要其中的数据为json类型即可
 $.getJSON(&#39;./result.json&#39;,function(result){
 var html_title=&#39;&#39;;
 var html_resultinfo=&#39;&#39;;
 
 html_title += &#39;<b>&#39;+result["title"]+&#39;</b>&#39;;
 $(&#39;#resultitle&#39;).after(html_title);
 $.each(result["resultinfo"],function(i,item){
 if(item["pass"]=="true") {
 html_resultinfo += &#39;<tr><td>&#39; + item[&#39;name&#39;] + &#39;</td>&#39; +
 &#39;<td>&#39; + item[&#39;moudle&#39;] + &#39;</td>&#39; +
 &#39;<td>&#39; + item["pass"] + &#39;</td>&#39; +
 &#39;<td>&#39; + item[&#39;onecepass&#39;] + &#39;</td>&#39; +
 &#39;<td id="&#39; + item[&#39;moudle&#39;] + &#39;" class="collapsed" onclick="collapsedisplay(&#39; + item[&#39;moudle&#39;] + &#39;)"><u style="color: blue;">展开</u></td></tr>&#39;;
 html_resultinfo +=&#39;<tr id="&#39; + item[&#39;moudle&#39;] + &#39;info" class="collapsedinfo" style="display:none"><td colspan="5">&#39; + item[&#39;log&#39;] + &#39;</td></tr>&#39;;
 }
$(&#39;#infotitle&#39;).after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。
 });
});
 
</script>





 

 

 

 

 

 

 

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. .

Related articles:

How to use the React Native screenshot component (detailed tutorial)

How to determine whether jQuery is loaded

How to use mui back to return to refresh the page

The above is the detailed content of How to append read data to html (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!