JQuery 가 PHP 를 만 드 는 AJAX 폼 제출 인 스 턴 스

JQuery 의 기본 문법 에 익숙 하지 않다 면 본 사이트 의 튜 토리 얼 자원 을 검색 하 십시오.PHPMailer 사용법 에 익숙 하지 않다 면 본 사이트 의 다른 글 인'PHPMailer 라 이브 러 리 로 이메일 보 내기'를 보십시오.첫 번 째 단 계 는 폼 HTML 페이지 를 만 듭 니 다.우 리 는 주요 폼 부분 HTML 구조 코드 만 보 여 줍 니 다

 
<div id="contact_form"> 
<form name="contact" method="post" action=""> 
<fieldset> 
<label for="name" id="name_label">  </label> 
<input type="text" name="name" id="name" size="30" value="" class="text-input" /> 
<label class="error" for="name" id="name_error">    </label> 

<label for="email" id="email_label">  Email</label> 
<input type="text" name="email" id="email" size="30" value="" class="text-input" /> 
<label class="error" for="email" id="email_error">    </label> 

<label for="phone" id="phone_label">      </label> 
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> 
<label class="error" for="phone" id="phone_error">    </label> 

<br /> 
<input type="submit" name="submit" class="button" id="submit_btn" value="    " /> 
</fieldset> 
</form> 
</div> 

몇 가지 주의:여 기 는 하나의 id 를 contact 로 사용 합 니 다.form 은 모든 정 보 를 포함 합 니 다.이것 은 의미 가 있 습 니 다.잠시 후 자바 스 크 립 트 가 사용자 와 정 보 를 교환 할 때 사 용 됩 니 다.여기 form 태그 의 속성 에는 method 와 action 도 포함 되 어 있 음 을 알 아야 합 니 다.이 의 미 는 사실 크 지 않다.자 바스 크 립 트 가 DOM 을 직접 조작 하기 때문에 이 두 가지 속성 이 없어 도 된다.사용자 가 입력 한탭 에 독립 된 id 를 추가 해 야 합 니 다.이것 은 두 번 째 원리 와 유사 합 니 다.그렇지 않 으 면 정상 적 인 효 과 를 볼 수 없다.두 번 째 단 계 는 JQuery 코드 를 추가 하기 시작 합 니 다.JQuery 공식 사이트 에서 JQuery 기본 라 이브 러 리 를 다운로드 한 다음 에 WEB 서버 에 올 리 고 사용 할 웹 페이지 에 추가 했다 고 가정 합 니 다.현재 JS 파일 을 새로 만 들 고 다음 코드 를 추가 합 니 다

 
$(function() { 
$(".button").click(function() { 
//                  
}); 
}); 

첫 번 째 줄 의 function()함 수 는 Jquery 의 document.ready 함수 용법 과 기능 이 같 습 니 다.모두 DOM 준비 가 끝 난 후에 자동 으로 실 행 됩 니 다.두 번 째 줄 은 트리거 함수 click()을 누 르 는 것 입 니 다.주의해 야 할 것 은 HTML 페이지 제출 버튼 에"button"이라는 Class 를 설치 하여 submi 제출 폼 을 모 의 하 는 기능 을 해 야 합 니 다.두 번 째 점 에서 JQuery 는 구조 와 논 리 를 잘 분리 할 수 있 음 을 알 수 있 습 니 다.세 번 째 단 계 는 인증 코드 를 작성 하 는 것 이 실제 응용 에서 빠 질 수 없습니다.사용자 가 누락 되 어 어떤 항목 을 잘못 작성 할 때 제때에 알려 줍 니 다

 

$(function() { 
$('.error').hide(); 
$(".button").click(function() { 
//      

$('.error').hide(); 
var name = $("input#name").val(); 
if (name == "") { 
$("label#name_error").show(); 
$("input#name").focus(); 
return false; 
} 
var email = $("input#email").val(); 
if (email == "") { 
$("label#email_error").show(); 
$("input#email").focus(); 
return false; 
} 
var phone = $("input#phone").val(); 
if (phone == "") { 
$("label#phone_error").show(); 
$("input#phone").focus(); 
return false; 
} 

}); 
}); 

몇 가지 주의:두 번 째 줄 에$('error')를 추가 합 니 다.hide()는 사용자 가 정 보 를 입력 하지 않 았 을 때 세 개의 class='error'가 잘못된 label 탭 을 숨 기기 위해 서 입 니 다.오류,즉 비어 있 을 때 만 오류 가 발생 합 니 다.(return false 의 역할 이 있 기 때문에 매번 오류 가 발생 합 니 다)JQuery 에서 DOM 의 한 ID 나 Class 의 값 을 가 져 오 는 것 은 매우 간단 합 니 다

 
//  id   
var name = $("input#name").val(); 
//  class   1   
var name = $(".name")[1].val(); 
           ，       ：      ，           。 


if (name == "") { //      
$("label#name_error").show(); //     
$("input#name").focus(); //     
return false; //   
} 

필수 필드 에서 검증 할 때 return false 가 있어 야 합 니 다.그렇지 않 으 면 필수 항목 이 채 워 지지 않 고 제출 되 는 경우 가 발생 합 니 다.네 번 째 단 계 는 Jquery 의 Ajax 함 수 를 통 해 폼 정 보 를 제출 합 니 다.이것 은 이 튜 토리 얼 이 새로 고침 없 이 제출 하 는 핵심 절 차 를 실현 합 니 다.ajax 함 수 를 통 해 javascript 이 DOM 에서 가 져 온 폼 항목 값 을 전달 한 다음 배경 처리 프로그램(process.php)에 비동기 로 제출 하고 Email 을 보 냅 니 다.이 단 계 는 인증 프로그램 에 이 어

 
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; 
//alert (dataString);return false; 

$.ajax({ 
type: "POST", 
url: "bin/process.php", 
data: dataString, 
success: function() { 
$('#contact_form').html("<div id='message'></div>"); 
$('#message').html("<h2>         ！</h2>") 
.append("<p>Script by Code52.net</p>") 
.hide() 
.fadeIn(1500, function() { 
$('#message').append("<img id='checkmark' src='images/check.png' />"); 
}); 
} 
}); 
return false; 

이상 코드 의 핵심 함 수 는.ajax()입 니 다.POST 방식 으로 이미 가 져 온 폼 정보(dataString)를 정 의 된 배경 PHP url(bin/process.php)에 비동기 로 전송 하 는 역할 을 합 니 다.만약 데이터 가 성공 적 으로 전송 된다 면,그것 은 우리 가 정의 한 일련의 정 보 를 사용자 에 게 되 돌려 줄 것 이다.마지막 으로 return false 는 페이지 를 다시 불 러 오 는 것 을 방지 하기 위해 서 입 니 다.성공 적 인 메 시 지 를 되 돌려 주 고 메 일 을 보 내 는 것 외 에 우 리 는 더 광범 위 한 일 을 할 수 있다.예 를 들 어 얻 은 데 이 터 를 백 엔 드 스 크 립 트 에 맡 길 때 데이터 베 이 스 를 삽입 한 다음 에 사용자 가 제출 한 정 보 를 되 돌려 줍 니 다.상세 한 설명:우선,폼 항목 의 값 을 가 져 옵 니 다.방법 은 세 번 째 단계 에서 언급 했 습 니 다.var name=$("input\#name").val();var email = $("input#email").val(); var phone = $("input#phone").val(); //폼 항목 의 값 을 문자열 var dataString='name='+name+'&email='+email+'+email+'&phone='+phone 으로 조합 합 니 다.이 조합 문자열 의 값 을 AJAX 함 수 를 통 해 배경 url 에 전달 합 니 다.성공 하면 성공 정 보 를 사용자 에 게 되 돌려 줍 니 다

 
$.ajax({ 
type: "POST", 
url: "bin/process.php", 
data: dataString, 
success: function() { 
$('#contact_form').html("<div id='message'></div>"); 
$('#message').html("<h2>Contact Form Submitted!</h2>") 
.append("<p>We will be in touch soon.</p>") 
.hide() 
.fadeIn(1500, function() { 
$('#message').append("<img id='checkmark' src='images/check.png' />"); 
}); 
} 
}); 
return false; 

이 예제 에서 ajax 함수 의 기능 은 이것 뿐 입 니 다.ajax 함수 에 대한 정 보 를 더 필요 로 한다 면 공식 문서:jQuery's documentation on the ajax function 다섯 번 째 단 계 를 참고 하 십시오.피드백 정 보 를 사용자 에 게 주 는 부분 은 우선 정보 제출 이 성공 한 후에 JQuery 는 다음 부분 을 통 해 동적 으로 교체 합 니 다.