Home > Others

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

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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

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.jb51.net/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_title = ''; 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 ['udle'] +' </td> '+' <td> '+ item ["pass"] +' </ td> '+' <td> '+ item ['onecepass'] +' </td> '+' <td id = "'+ item ['moudle'] +' "class =" collapsed "onclick =" collapsedisplay ('+ item ['moudle'] + ') "> <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>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
to read html content from document use how to read data from csv file in html how to read html how to generate json schema from json data append data to file how to read data from excel file in php how to read data from mysql in php

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More