jquery가 json에서 데이터를 읽고 이를 html에 추가하는 방법-JS 튜토리얼-php.cn

jquery가 json에서 데이터를 읽고 이를 html에 추가하는 방법

小云云

풀어 주다： 2017-12-07 15:43:27

원래의

2460명이 탐색했습니다.

jQuery는 HTML과 JavaScript 간의 작업을 단순화하는 크로스 브라우저 JavaScript 라이브러리입니다. 실제 응용에서는 한자가 있는 경우 json_encode() 함수를 직접 사용하면 한자가 "u***" 형식으로 인코딩됩니다. 이 문제는 php5.4부터 해결되었습니다. 한자가 인코딩되는 문제를 해결합니다. 이번 글에서는 jquery를 사용하여 json에서 데이터를 읽고 이를 html에 추가하는 방법에 대한 관련 정보를 주로 소개합니다.

JSON 형식

json은 Ajax에서 가장 자주 사용되는 데이터 형식이며, 브라우저와 서버 간의 통신은 이 형식과 불가분의 관계입니다.

JSON 형식 설명

JSON의 속성 이름은 따옴표로 묶어야 한다는 점에 유의하는 것이 중요합니다.

1. jquery를 다운로드하고 설치하세요

다음 방법을 통해 js의 온라인 버전을 도입할 수 있습니다.

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

로그인 후 복사

설치 설명서를 참조하세요. http://www. jb51.net/zt /jquerydown.htm

2. json 형식의 파일을 준비합니다. 접미사는 .json

일 수 있습니다. 예를 들어 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"
  }
 }
 ]
}

로그인 후 복사

3. $.getJSON

을 통해 Json 파일의 데이터를 가져옵니다. 예를 들어 result.json 파일의 내용을 읽고 결과 변수에 저장합니다. 결과는 json 형식입니다

$.getJSON(&#39;./result.json&#39;,function(result){}

로그인 후 복사

4 [$('#element id').after(html content);]를 통해 위치 지정 요소 뒤에 html 콘텐츠를 추가합니다. Element Positioning Method

$("#id")：定位到id，
$(“p")：定位到标签p，其他标签同理
$(“.class”)：定位到class

로그인 후 복사

insert html 컨텐츠 위치 :

append () - 선택한 요소의 끝에 컨텐츠 삽입

prepend () - 컨텐츠 삽입 선택한 요소의 시작
after() - 선택한 요소 뒤에 내용 삽입
before() - 선택한 요소 앞에 내용 삽입
Json 데이터 연산

JSON 개체 [키] 내용을 읽으려면: result['title'] 또는 result ."title"을 사용하십시오.
배열의 객체 값은 $.each를 통해 얻을 수 있습니다:

$.each(JSON 배열 객체, 함수(순회 index i, traversing object) {traversed object 조작})

result.json을 읽고 html을 추가하는 코드는 다음과 같습니다

(jquery는 <script> 태그에 작성해야 합니다)<p><br/></p> <p><strong></strong><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>