ajax_jquery에 대한 jquery 지원 소개

1. 세 가지 방법

1.1.load 방법

//기능: 요구 사항을 충족하는 DOM 객체에 직접 서버에서 반환된 데이터를 추가합니다.
//동등합니다. obj .innerHTML = 서버에서 반환된 데이터

사용법:
$obj.load(url,[request 매개변수])

url: 요청 주소
요청 매개변수:
첫 번째 형식: 요청 문자열(예: 'username=zs&age=22')
두 번째 형식: 객체(예: {'username':'zs','age':22}

//참고:
//a, 로드 메소드에 매개변수가 없으면 get 메소드를 사용하여 요청을 보냅니다. 매개변수가 있는 경우 post 메소드를 사용하여 요청을 보냅니다.
//b, 중국어 매개변수 값이 있으면 로드 메소드가 이미 인코딩을 수행한 것입니다.

예:

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

$ (function( ){
$('a.s1').toggle(function(){
var Airlines = $(this).parent().siblings().eq(0).text() ;
$(this).next().load('priceInfo.do','airline=' Airlines)
$(this).html('이코노미석 가격 표시'); ,function( ){
$(this).next().empty();
$(this).html('모든 요금 표시')
});

1.2.$.get() 및 $.post() 메소드

//기능: 서버에 get 또는 post 요청 보내기(get 요청, 즉 캐싱 있음) 문제)

사용법:
$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[ type]) ;

url: 요청 주소
data: 요청 매개변수, 형식은 위와 동일합니다.
콜백: 서버에서 반환한 데이터를 처리하는 데 사용할 수 있는 콜백 함수입니다.
콜백 형식:

function(data, statusText),

이 중 data는 서버가 반환한 데이터를 가져올 수 있으며,
statusText는 처리 과정을 설명하는 간단한 문자열입니다. 서버 상태.

유형: 서버가 반환하는 데이터 유형은 다음과 같습니다.
html: html 콘텐츠를 반환합니다.
텍스트: 텍스트를 반환합니다.
json: json 문자열 반환
xml: DOM 호환 xml 객체 반환
script: javascriptz 반환

예:

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

function quoto(){

$.post('quoto.do',function(data) {
//서버에서 반환된 데이터가 json 문자열인 경우
//자동으로 js 개체 또는 json 개체 배열로 변환됩니다.
$('#tb1').empty( );
for(i=0;i$('#tb1').append(
'' 데이터[i] .code
'' 데이터[i].name
'' 데이터[i].price
'');
}
},'json');t
}


1.3.$.ajax(옵션):

/ /options는 요청 전송을 위한 옵션을 지정하는 데 사용되는 {key1:value1,key2:value2...} 형태의 js 객체입니다.

옵션 매개변수는 다음과 같습니다.

url(string) : //요청 주소
type(string) : //GET/POST
data(object/string) : // 서버로 전송되는 데이터
dataType(string): //서버에서 반환될 것으로 예상되는 데이터 유형
success(function): //요청 성공 후 호출되는 콜백 함수에는 두 개의 매개변수가 있습니다. :
function(data , textStatus),
여기서 data는 서버에서 반환된 데이터이고,
textStatus는 상태를 설명하는 문자열입니다.
error(function): //3개의 매개변수를 사용하여 요청이 실패할 때 호출되는 함수
function(xhr, textStatus, errorThrown),
여기서 xhr은 기본 ajax 객체(XMLHttpRequest),
textStatus입니다. , 두 매개변수 errorThrown
중 하나를 사용하면 기본 예외 설명을 얻을 수 있습니다.
async:true(기본값)/false: //값이 false인 경우 동기 요청을 보냅니다.

예:

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

$(function(){
$('#s1').change(function(){

$.ajax({
'url':'carInfo. do',
'type':'post',
'data':'carName=' $('#s1').val(),
'dataType':'xml',
'success':function(data){
//data는 서버에서 반환한 데이터입니다
//xml 문서가 반환되면
//$function을 사용하여 래핑해야 합니다. $ (데이터)를 jQuery
//쉬운 검색을 위한 개체
//추가하기 전에 지우기
$('#tb1').empty()
$('#tb1').append (
'제조업체:'
$(data).find('회사').text()
' 가격:' $(data).find('price ').text()
' 본체 크기:'
$(data).find('size').text()
'문 수:' $ (data).find('door').text()
'변위: '
$(data).find('vol').text()
'가속 성능:'
$(data).find('speed').text()
'')
//변환하려면 테이블 표시
$('#tips').slideDown('slow');
setTimeout(function(){
$('#tips').fadeOut('slow');
},2000);
},
'error':function(){
$('#tb1').append(
"차량 모델 정보를 일시적으로 사용할 수 없습니다");
$('#tips').slideDown('slow');
}
});
})
});

예 2:
한자 깨짐 문제 해결:

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

$.ajax({
'url':'netctoss7/ajaxCode',
'type': 'post',
'data':{name:value},
'dataType':'json',
'async':false,
'success':function(data){
if(data) {
$('#msg_verCode').text('');
v1=true;
}else{
$('#msg_verCode').text( '인증 코드 오류') ;
}
})

2.2.1.serialize():

//jquery 객체에 포함된 양식 또는 양식 컨트롤을 쿼리 문자열로 변환합니다.

2.2.serializeArray():

//배열로 변환하며, 각 배열 요소는 {name:fieldName,value:fieldVal} 형태의 객체입니다.
//직렬화된 요소의 역할은 데이터에 값을 할당하는 Ajax 요청에서 주로 사용됩니다.

참고:
은 양식 또는 양식 컨트롤에만 사용할 수 있습니다.
양식 이름과 해당 값을 다음 형식으로 직접 보냅니다. 이름=값

예:

코드 복사 코드는 다음과 같습니다. $.ajax({})

// 'data':'carName=' $('#s1').val(),

'data':$('#s1').serialize(),

// 'data' :{'carName':$('#s1').val()},
'data':$('#s1').serializeArray(),