《 날 카 로 운 jQuery 》 요점 요약 (5) jQuery 와 ajax 의 응용 (하)
14186 단어 jquery
2. 직렬 화 요소 1 serialize () 방법 은 앞에서 말 한 $. get () 과 $. post () 방법 을 먼저 살 펴 봅 니 다.
<
form
id
="form1"
action
="#"
>
<
p
>
</
p
>
<
p
>
<
input
type
="text"
name
="username"
id
="username"
/></
p
>
<
p
>
：
<
textarea
name
="content"
id
="content"
></
textarea
></
p
>
<
p
><
input
type
="button"
id
="send"
value
=" "
/></
p
>
</
form
>
이름과 내용 을 얻 기 위해 서 는 필드 의 값 을 data 매개 변수 에 하나씩 추가 해 야 합 니 다.
$(
"
#send
"
).click(
function
(){
$.get(
"
get1.php
"
,{
username:$(
"
#username
"
).val(),
content:$(
"
#content
"
).val()
},
function
(data,textStatus){
$(
"
#resText
"
).html(data);
//
});
});
만약 에 폼 요소 가 복잡 하 다 면 이런 방식 을 사용 하면 작업량 을 늘 리 는 동시에 폼 에 탄력 이 부족 하 다.serialize () 방법 을 사용 하여 다음 과 같이 고 칩 니 다.
$(
"
#send
"
).click(
function
(){
$.get(
"
get1.php
"
,$(
"
form1
"
).serialize(),
function
(data,textStatus){
$(
"
#resText
"
).html(data);
//
});
});
폼 에 필드 를 추가 하 더 라 도 스 크 립 트 는 사용 할 수 있 으 며, serialize () 방법 은 문자 인 코딩 문 제 를 피 할 수 있 습 니 다 (P196).
serialize () 방법 은 jQuery 대상 에 작용 하기 때문에 폼 만 사용 할 수 있 는 것 이 아니 라 다른 선택 기 에서 선택 한 요소 도 모두 사용 할 수 있 습 니 다.예:
$(
"
:checkbox,:radio
"
).serialize();
//
， 。
2 serializeArray () 방법 (P196) DOM 요 소 를 정렬 한 후 JSON 형식의 데 이 터 를 되 돌려 줍 니 다.
var
fields
=
$(
"
:checkbox,:radio
"
).serializeArray();
console.log(fields);
//
firebug
$. each () 함 수 를 사용 하여 데 이 터 를 교체 출력 합 니 다:
$(
function
(){
var
fields
=
$(
"
:checkbox,:radio
"
).serializeArray();
console.log(fields);
//
firebug
$.each(fields,
function
(i,field){
$(
"
#results
"
).append(field.value
+
"
,
"
);
});
});
3 $. param () 방법 은 serialize () 방법의 핵심 으로 하나의 배열 이나 대상 을 key / value 에 따라 직렬 화 하 는 데 사용 된다.
var
obj
=
{a:
1
,b:
2
,c:
3
};
var
k
=
$.param(obj);
alert(k);
//
a=1&b=2&c=3
3. jQuery 의 Ajax 전역 이벤트
예 를 들 어 Ajax 요청 이 시 작 될 때 ajax Start () 방법의 리 셋 함 수 를 촉발 합 니 다. Ajax 요청 이 끝 날 때 ajax Stop () 방법의 리 셋 함 수 를 촉발 합 니 다.예 를 들 어 원 격 콘 텐 츠 를 불 러 올 때 알림 정 보 를 추가 합 니 다. Ajax 요청 이 시 작 될 때 이 요 소 를 표시 합 니 다. Ajax 요청 이 끝나 면 이 요 소 를 숨 깁 니 다.
<
div
id
="loading"
>
...
</
div
>
$(
"
#loading
"
).ajaxStart(
function
(){
$(
this
).show();
});
$(
"
#loading
"
).ajaxStop(
function
(){
$(
this
).hide();
});
이 페이지 의 다른 곳 에서 도 Ajax 를 사용한다 면 이 알림 정 보 는 전역 적 이기 때문에 유효 합 니 다.
기타 전역 이벤트:
ajax Complete (callback): Ajax 요청 완료 시 실행 되 는 함수
ajax Error (callback): Ajax 요청 이 잘못 되 었 을 때 실 행 된 함수 입 니 다. 포 착 된 오 류 는 마지막 매개 변수 로 ajax Send (callback) 를 전달 할 수 있 습 니 다. Ajax 요청 이 전송 되 기 전에 실 행 된 함수 ajaSuccess (callback): Ajax 요청 이 성공 할 때 실 행 된 함수 입 니 다. 전체 방법의 영향 을 받 지 않 으 려 면 $. ajax (options) 방법 을 사용 할 때,인자 의 global 을 false 로 설정 합 니 다.
$.ajax({
url:
"
test.html
"
,
global:
false
//
Ajax
});
4. jQuery 기반 Ajax 채 팅 방 프로그램 설명 (P198, 약)
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
