집 >웹 프론트엔드 >JS 튜토리얼 >읽은 데이터를 HTML에 추가하는 방법(자세한 튜토리얼)

읽은 데이터를 HTML에 추가하는 방법(자세한 튜토리얼)

亚连원래의: 2018-06-23 14:47:572637검색

이 글에서는 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>

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

2. 접미사는 .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

예를 들어, result.json 파일의 내용을 읽어서 결과 변수에 저장합니다. 결과는 json 형식입니다

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

4. [$('#element id').after(html content);]를 통해 위치 지정

요소 위치 지정 방법

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

요소 뒤에 html 콘텐츠 삽입 위치:

append() - 콘텐츠 삽입 선택한 요소의 끝
prepend() - 선택한 요소의 시작 부분에 삽입 Content
after() - 선택한 요소 뒤에 내용 삽입
before() - 선택한 요소 앞에 내용 삽입 요소

Json 데이터 작업

JSON 개체 [키] 읽기 내용 가져오기: 결과['제목'] 또는 결과 사용."제목"

배열의 개체 값을 얻을 수 있습니다. $.each를 통한 데이터:

$.each(JSON 배열 객체, 함수(traverse index i, traverse Object) {Operation traversed object})

result.json을 읽고 다음과 같이 html 코드를 추가합니다

(jquery 필요 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 작성하세요)




 New Document 

<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(&#39;./result.json&#39;,function(result){
 var html_title=&#39;&#39;;
 var html_resultinfo=&#39;&#39;;
 
 html_title += &#39;<b>&#39;+result["title"]+&#39;</b>&#39;;
 $(&#39;#resultitle&#39;).after(html_title);
 $.each(result["resultinfo"],function(i,item){
 if(item["pass"]=="true") {
 html_resultinfo += &#39;<tr><td>&#39; + item[&#39;name&#39;] + &#39;</td>&#39; +
 &#39;<td>&#39; + item[&#39;moudle&#39;] + &#39;</td>&#39; +
 &#39;<td>&#39; + item["pass"] + &#39;</td>&#39; +
 &#39;<td>&#39; + item[&#39;onecepass&#39;] + &#39;</td>&#39; +
 &#39;<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>&#39;;
 html_resultinfo +=&#39;<tr id="&#39; + item[&#39;moudle&#39;] + &#39;info" class="collapsedinfo" style="display:none"><td colspan="5">&#39; + item[&#39;log&#39;] + &#39;</td></tr>&#39;;
 }
$(&#39;#infotitle&#39;).after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。
 });
});
 
</script>




 

 

 
 
 
 

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

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

읽은 데이터를 HTML에 추가하는 방법(자세한 튜토리얼)

관련 기사