JQuery는 json 및 ajax를 처리하고 JSON 예제 code_jquery를 반환합니다.-JS 튜토리얼-php.cn

JQuery는 json 및 ajax를 처리하고 JSON 예제 code_jquery를 반환합니다.

WBOY

풀어 주다： 2016-05-16 17:05:34

원래의

823명이 탐색했습니다.

1. JSON에 대한 기본 지식.

JSON의 개체는 "{}"으로 식별됩니다. "{}"는 {"AreaId":"123"}와 같은 개체를 나타내며 개체의 값은 키-값 형식입니다. 쌍(키: 값).

"[]"는 배열을 식별하며 배열 내부의 데이터는 ","로 구분됩니다(예: ["AreaId": "123", "AreaId": "345"]).

많은 경우 객체의 배열입니다.

코드 복사 코드는 다음과 같습니다.

[{"AreaId":"123" },{ "AreaId":"345"}]

사실 배열도 객체이고 위의 형식은 다음과 같이 작성할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

{"Area":[{"AreaId ":" 123"},{"AreaId":"345"}]}

이것은 두 개의 하위 데이터가 있는 Area 개체를 나타내며, 각 하위 데이터도 개체이고, 각 하위 개체는 AreaId입니다.

JSON의 문자열 및 문자 정의 형식은 일반적인 C 언어 정의와 유사합니다. 큰따옴표는 문자열을 정의하고 작은따옴표는 문자를 정의합니다.

JSON 키는 큰따옴표로 묶여 있습니다. 예를 들어 위의 "Area"와 "AreaId"는 큰따옴표로 묶여 있습니다. 일부 언어에서는 JSON 문자열을 구성할 때 이스케이프 문자 이스케이프 큰따옴표를 사용할 수 있습니다.

2. JSON 문자의 JavaScript 연산

1. 먼저 JSON 문자열과 JSON 객체를 구별하세요

JSON 문자열:

코드 복사 코드는 다음과 같습니다.

Var strJSON = "{"Area": [{" AreaId":"123"},{"AreaId":"345"}]}",

실제로 다음과 같이 쓸 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

Var strJSON = '{"Area": [{" AreaId":"123"},{"AreaId":"345"}]}',

JS에서는 작은따옴표와 큰따옴표 모두 문자열을 나타낼 수 있으므로 위에서 큰따옴표를 사용한 첫 번째와 작은따옴표를 사용한 두 번째가 JSON 문자열을 나타냅니다.

아래 JSON 객체를 보세요

코드 복사 코드는 다음과 같습니다.

Var JSON = {"Area": [{"AreaId ":"123"},{"AreaId":"345"}]},

보시다시피 JSON 개체 외부에는 작은따옴표나 큰따옴표가 없습니다. 이는 JSON 개체라는 의미입니다.

서버에서 손상된 스크립트:

코드 복사 코드는 다음과 같습니다.

$data ['id '] = 1;
$dat['name'] = "메리";
$da['red']= array_merge($data,$dat);
$data1[' id'] = 2;
$dat1['name'] = "Yanzi";
$da['blue']= array_merge($data1,$dat1);
print_r($da); /// 2차원 배열을 출력합니다(아래 그림 참조)

/*
배열
(
[red] => 배열
(
[id] => 1
[name] => mary
) [파란색] = & gt; 배열
(
[ID] = & gt; 2
[이름] = & gt; Swallow
)

*/
echo json_encode($da);//출력은 json 형식으로 변환된 문자열이며 js에서 직접 사용할 수 있습니다(다음과 같음)

/*
{"red":{"id" :1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}}
*/
?>

jquery 스크립트:

js로 복귀 후 처리:

첫 번째는 varl 변환을 사용해야 합니다. 문자열인 경우 eval을 사용하여 jquery 객체로 변환합니다(다음과 같습니다)

코드 복사 코드는 다음과 같습니다.

 
var arr = '{"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"} }';//u71d5u5b50 이것은 PHP에서 자동으로 변환됩니다 
var dataObj = eval("(" arr ")");//여기에 괄호와 큰따옴표를 추가한 이유는 잘 모르겠지만 그냥 json 구문에 오면 기계적으로만 기억할 수 있습니다 
 $.each(dataObj,function(idx,item){ 
 //Output 
 Alert(item.id "Haha" item.name); 
})

두 번째 유형: 변환이 필요하지 않음:

코드 복사 코드는 다음과 같습니다.

 
var arr = {"red":{ "id" :1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}};
 $.each(arr,function(idx,item ){ 
 //출력
 Alert(item.id "하하" item.name);
})

루프에는 두 가지 방법도 있습니다:
//방법 1:

코드 복사 코드는 다음과 같습니다.

 
$.each(arr,function(idx ,item) { 
 //출력
 alert(item.id "Haha" item.name);
})

//방법 2:

코드 복사 코드는 다음과 같습니다.

for(var key in arr){
 경고(키);
 경고(arr[key].status);
 } 

효과를 체험해 보실 수 있습니다.

Ajax가 JSON을 반환할 때 처리 방법

1. 일반 aspx 페이지를 사용하여 처리
이 방법이 가장 처리하기 쉬운 것 같습니다. 아래 코드를 살펴보세요

코드 복사 코드는 다음과 같습니다.

$.ajax({
' ,
> ~ });

백그라운드에서 데이터를 전송하는 코드는 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

Response.Clear() 
 Response.Write ("[{"demoData":"JSON 데이터입니다"}]"); 
                        Response.Flush();

이 처리 방법은 전달된 데이터를 json 데이터로 직접 구문 분석하는데, 이는 여기의 프런트엔드 js 코드가 data[0], 이 json과 같은 문자열 데이터 대신 데이터를 json 객체 데이터로 직접 구문 분석할 수 있음을 의미합니다. 객체 데이터는 여기서 직접 사용됩니다