Home > Web Front-end > JS Tutorial > body text

jquery reads json data and uses it in html

php中世界最好的语言
Release: 2018-04-19 14:08:08
Original
1783 people have browsed it

This time I will bring you jquery to read json data and use it in html. jquery to read json data and use it in html. What are the precautions?The following is a practical case. Let’s take a look. one time.

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 quotes.

1. Download and install jquery

The online version of js can be introduced through the following method:

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
Copy after login

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"
  }
 }
 ]
}
Copy after login

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){}
Copy after login

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

Element positioning method

$("#id"):定位到id,
$(“p"):定位到标签p,其他标签同理
$(“.class”):定位到class
Copy after login

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() - At 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 can be obtained through $.each:

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

The code to read result.json and append html is as follows

(jquery needs to be written in the <script> tag)</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!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"> &lt;script src=&quot;https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&quot;&gt;&lt;/script&gt; <script> $(document).ready(function(){ //使用getJSON方法读取json数据, //注意:info.json可以是不同类型文件,只要其中的数据为json类型即可  $.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['moudle'] + '</td>' +  '<td>' + item["pass"] + '</td>' +  '<td>' + item['onecepass'] + '</td>' +  '<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>';  html_resultinfo +='<tr id="&#39; + item[&#39;moudle&#39;] + &#39;info" class="collapsedinfo" style="display:none"><td colspan="5">' + item['log'] + '</td></tr>';  } $('#infotitle').after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。  }); });   </script>

 

 

 

 

 

 

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

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How jQuery dynamically controls page elements

How jQuery configures webpack

jQuery EasyUI operation folding panel accordion detailed steps

The above is the detailed content of jquery reads json data and uses it in html. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template