How jquery reads data from json and appends it to html-JS Tutorial-php.cn

How jquery reads data from json and appends it to html

小云云

Release： 2017-12-07 15:43:27

Original

2458 people have browsed it

jQuery is a cross-browser JavaScript library that simplifies operations between HTML and JavaScript. In practical applications, when there are Chinese characters, using the json_encode() function directly will cause the Chinese characters to be encoded in the form of "\u***". This problem has been solved since php5.4. Use the following method to solve the problem of Chinese characters being encoded. question. In this article, we mainly introduce to you the relevant information on 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 for communication between the browser and the server Can't live without 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>

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(&#39;./result.json&#39;,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 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 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 (traverse index i, traverse object) {operate the traversed object})

Read result.json and append html code as follows

(jquery needs to be written in the <script> tag)</p><p> <strong></strong><br/></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"> <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('./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="' + item['moudle'] + '" class="collapsed" onclick="collapsedisplay(' + item['moudle'] + ')"><u style="color: blue;">展开</u></td></tr>'; html_resultinfo +='<tr id="' + item['moudle'] + 'info" class="collapsedinfo" style="display:none"><td colspan="5">' + item['log'] + '</td></tr>'; } $('#infotitle').after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。 }); }); </script>

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

Copy after login

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