How to Use jquery to read data from json and append it to html, jqueryjson

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.