How to Use jquery to read data from json and append it to html, jqueryjson
JSON format
Json is the most frequently used data format in Ajax. Communication between browsers and servers is inseparable.
JSON format description
Note that attribute names in JSON must be enclosed by quotation marks.
1. Download and install jquery
You can use the following method to introduce the online version of js:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
Reference installation document: http://www.bkjia.com/zt/jquerydown.htm
2. Prepare a file in json format with a suffix not. json
For example, the format of result. json is as follows:
{"Title": "[UI test result]-Turn around", "starttime": "45", "endtime": "42 ", "passcount": 10, "failurecount": 5, "resultinfo": [{"name": "published", "moudle": "Publish", "pass ": "true", "onecepass": "true", "log": "true" },{ "name": "Logon", "moudle": "Login ", "pass": "false", "onecepass": "true", "log": "asserterrorlog", "failurereason": {"errorlog": "asserterror ", "errorimg ":"./.jpg "}}]}
3. Get the data of the Json file through $. getJSON
For example, the following example reads the content of the result. json file and stores it in the result variable. The result is in json format.
$.getJSON('./result.json',function(result){}
4. Use [$ ('# element id'). after (html content);] to add the html content to the end of the located element.
Element Locating Method
$ ("# Id"): locate id, $ ("p"): locate tag p. Other tags are the same as $ (". class"): locate class
Insert html content location:
- 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
Json Data Operations
JSON object [key] to read the content: result ['title'], or use result. "title"
The object Value of the array, which can be obtained through $. each:
$. Each (JSON array object, function (traversing index I, traversing object) {traversing object })
Read result. json. The code for appending html is as follows:
(Jquery needs to be written in the <script> label)
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <script src =" https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js "> </script> <script> $ (document ). ready (function () {// use the getJSON method to read json data. // Note: info. json can be a different type of file, as long as the data in the file is of the json type $. getJSON ('. /result. json', function (result) {var html_t Itle = ''; var html_resultinfo =''; html_title + = '<B>' + result ["title"] + '</B> '; $ ('# resultitle '). after (html_title); $. each (result ["resultinfo"], function (I, item) {if (item ["pass"] = "true ") {html_resultinfo + = '<tr> <td>' + item ['name'] + '</td>' + '<td>' + item ['moudle'] + '</td>' + '<td>' + item ["pass"] + '</td>' + '<td>' + item ['onecepass'] + '</td>' + '<td id = "' + item ['moudle'] + '" class = "collapse D "onclick =" collapsedisplay ('+ item ['udle'] +') "> <u style =" color: blue; "> Expand </u> </td> </tr> '; html_resultinfo + = '<tr id = "' + item ['udle'] + 'info" class = "collapsedinfo" style = "display: none "> <td colspan =" 5 "> '+ item ['log'] +' </td> </tr> ';} $ (' # infotitle '). after (html_resultinfo); // after method: insert content after each matching element. }) ;}); </Script> </HEAD> <BODY> <div style = "margin-top: 30px"> <div style = "font-size: 30px; text-align: center "> <p id =" resultitle "> </p> </div> <div id =" resultinfo "style =" clear: both; padding-top: 30px "> <table style =" width: 1080px "> <tr id =" infotitle "> <th style =" width: 360px "> Use Case name </th> <th style =" width: 200px "> Module name </th> <th style =" width: 180px "> success </th> <th style =" width: 180px "> one time success </th> <th style =" width: 160px "> details </th> </tr> </table> </div> </BODY> </HTML>
Summary
The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.