json에서 추출한 데이터를 html에 추가하는 방법

이번에는 json에서 추출한 데이터를 html에 추가하는 방법과 json에서 추출한 데이터를 html에 추가할 때 어떤 노트가 있는지 알려드리겠습니다.

JSON 형식

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

JSON 형식 설명

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

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

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

<script></script>

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('./result.json',function(result){}

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

요소 위치 지정 방법

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

html 콘텐츠 위치 삽입:

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

• prepend() - 선택한 요소의 시작 부분에 콘텐츠 삽입

• after() - 선택한 요소 뒤에 콘텐츠 삽입

• before() - 선택한 요소 앞에 콘텐츠 삽입

Json 데이터 작업

JSON 개체 [키] 콘텐츠를 읽으려면: result[' title'] 또는 결과를 사용합니다."title"

배열의 객체 값은 $.each를 통해 얻을 수 있습니다:

$.each(JSON array object, function (traverse index i, traverse object) {operate 순회한 객체})

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

(jquery는 <script> 태그에 작성해야 합니다)</script>

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">




<script></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;&#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;&#39; +
 &#39;<td>&#39; + item[&#39;moudle&#39;] + &#39;&#39; +
 &#39;<td>&#39; + item["pass"] + &#39;&#39; +
 &#39;<td>&#39; + item[&#39;onecepass&#39;] + &#39;&#39; +
 &#39;<td id="&#39; + item[&#39;moudle&#39;] + &#39;" class="collapsed" onclick="collapsedisplay(&#39; + item[&#39;moudle&#39;] + &#39;)"><u style="color: blue;">展开&#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;&#39;;
 }
$(&#39;#infotitle&#39;).after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。
 });
});
 
</script>



 

 

 
 
 

 

             

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

 

읽고 나면 메소드를 마스터하신 것 같습니다. 이 기사의 사례에 대해 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

빈 공간에 숨겨진 요소를 찾는 방법

jQuery가 로드되었는지 확인하는 방법

새 구성이 없다는 자세한 설명

의 첫 글자를 스와이프하세요. 휴대폰에서 병음으로 도시를 선택하세요

위 내용은 json에서 추출한 데이터를 html에 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!