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('./result.json',function(result){} 4 [$('#element id').after(html content);]를 통해 위치 지정 요소 뒤에 html 콘텐츠를 추가합니다. Element Positioning Method
$("#id")：定位到id，
$(“p")：定位到标签p，其他标签同理
$(“.class”)：定位到class
insert html 컨텐츠 위치 :
append () - 선택한 요소의 끝에 컨텐츠 삽입
Json 데이터 연산
JSON 개체 [키] 내용을 읽으려면: result['title'] 또는 result ."title"을 사용하십시오.
배열의 객체 값은 $.each를 통해 얻을 수 있습니다:
$.each(JSON 배열 객체, 함수(순회 index i, traversing object) {traversed object 조작})
result.json을 읽고 html을 추가하는 코드는 다음과 같습니다
| 用例名称 | 模块名称 | 是否成功 | 一次成功 | 详情 |
|---|