jquery를 사용하여 json에서 데이터를 읽고 이를 html에 추가하여 메서드를 구현합니다.
- 小云云원래의
- 2018-01-05 17:51:471271검색
이 글에서는 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"
}
}
]
}
형식은 다음과 같습니다. $.getJSON을 통해 Json 파일의 데이터를 가져옵니다.
예를 들어, result.json을 읽어보세요. 파일의 내용은 result 변수에 저장되며, 결과는 json 형식입니다
$.getJSON('./result.json',function(result){}
4. [$를 통해 위치가 지정된 요소 뒤에 html 콘텐츠를 추가합니다. ('#element id').after(html content);]
$("#id")：定位到id，
$(“p")：定位到标签p，其他标签同理
$(“.class”)：定位到classInsert html content position: - append() - 선택한 요소의 끝에 콘텐츠 삽입
- prepend() - 선택한 요소의 시작 부분에 콘텐츠 삽입
- after() - 선택한 요소 뒤에 콘텐츠 삽입
- before() - 선택한 요소 앞에 콘텐츠 삽입
| 用例名称 | 模块名称 | 是否成功 | 一次成功 | 详情 |
|---|