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은 포함된 전체 정보를 포함하는 데 사용됩니다. 이는 의미가 있으며 나중에 JavaScript가 사용자와 상호 작용할 때 사용됩니다. 두 번째 단계는 JQuery 코드 추가 시작입니다.
JQuery 공식 홈페이지에서 JQuery 기본 라이브러리를 다운로드한 후 자신의 WEB 서버에 업로드하고, 원하는 웹 페이지에 추가했다고 가정합니다. 사용.
이제 새 JS 파일을 만들고 다음 코드를 추가하세요.
코드 복사 코드는 다음과 같습니다.$(function( ) {
$(".button").click(function() {// 양식 유효성 검사 및 백그라운드 처리 논리 처리
});
});
첫 번째 줄의 function() 함수는 Jquery의 document.ready 함수와 사용법 및 기능이 동일하며 DOM이 준비된 후 자동으로 실행됩니다.
세 번째 단계는 인증코드를 작성하는 것입니다.
실제 응용에서는 이 단계가 필수적입니다. 사용자가 항목을 놓치거나 잘못 입력한 경우 즉시 메시지를 표시합니다.
코드는 다음과 같습니다.$(function() { $('.error' ).hide ();
$(".button").click(function() {// 인증코드
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").
$( "input# name").focus();
return false
}
var email = $("input#email").val()
if (email == "" ) {
$("label#email_error").show();
$("input#email").focus()
return false
}
varphone = $(" input#phone").val();
if (phone == "") {
$("label#phone_error").show()
$("input#phone ").focus();
return false;
}
});
});
몇 가지 참고 사항:
2번째 줄에 $를 추가합니다. ('.error').hide()는 사용자가 정보를 입력하지 않을 때 오류를 표시하는 class="error"로 세 개의 레이블 레이블을 숨기는 것입니다. 그리고 오류가 있는 경우에만 오류가 나타납니다. 즉, 비어 있습니다. (false를 반환하는 함수 때문에 매번 한 번의 오류만 발생합니다.)
코드는 다음과 같습니다. //id 값 가져오기var name = $("input#name").val() ;
//클래스 번호 값 1 가져오기var name = $(".name")[1].val()
이제 사용자가 이름을 입력하지 않는다고 가정하면, 처리 논리는 먼저 오류를 표시한 다음 상위 이름에 초점을 맞춰야 합니다.
if (name == "") { //사용자 이름이 비어 있습니다
$("label#name_error").show() //오류 메시지
$("input#name") . focus(); //포커스 위치 지정
return false; //Return
}
필수 필드를 확인할 때 false를 반환해야 합니다. 그렇지 않으면 필수 필드가 불완전해집니다. 제출한 경우.
네 번째 단계는 Jquery의 Ajax 기능을 통해 양식 정보를 제출하는 것입니다.
코드는 다음과 같습니다. var dataString = 'name= ' 이름 ' &email=' 이메일 '&phone=' 전화 //alert (dataString); return false
$.ajax({type: "POST",
url: "bin /process.php",
데이터: dataString,
성공: function() {
$('#contact_form').html("
");
$( '#message ').html("
")
.append("
Code52.net의 스크립트
")
.hide()
.fadeIn(1500, 함수 () {
$('#message').append("
");
}
})
return false; code 핵심 함수는 .ajax() 입니다. 해당 함수는 POST 메서드를 사용하여 얻은 양식 정보(dataString)를 정의된 배경 PHP URL(bin/process.php)에 비동기적으로 전송하는 것입니다. 우리가 정의한 일련의 메시지가 사용자에게 반환되고 최종적으로 false를 반환합니다. 이는 페이지가 다시 로드되는 것을 방지하기 위한 것입니다.
성공 메시지 반환 및 이메일 전송 외에도 더 광범위한 작업을 수행할 수 있습니다. 획득한 데이터를 백그라운드 스크립트로 처리하면 해당 데이터가 데이터베이스에 삽입된 후 사용자가 제출한 정보가 반환됩니다.
자세한 설명:
먼저 양식의 값을 가져옵니다. 이 작업은 세 번째 단계에서 이미 수행했습니다.
var name = $("input#name").val()
var email = $("input#email").val ();
varphone = $("input#phone").val();
//양식 항목의 값을 문자열로 결합합니다.
var dataString = 'name=' name '&email=' email '&phone='phone
이 결합된 문자열의 값은 AJAX 함수를 통해 배경 URL로 전달됩니다. 성공하면 사용자에게 성공 정보가 반환됩니다.
코드 복사 코드는 다음과 같습니다. $.ajax({
type: "POST",url: "bin/ process.php",
데이터: dataString,
성공: function() {
$('#contact_form').html("
");
문의 양식이 제출되었습니다!
곧 연락드리겠습니다.
")
.hide().fadeIn( 1500, function() {
$('#message').append("
");
}); }
});
return false
이 예에서는 ajax 함수에 대한 추가 정보가 필요한 경우 공식 문서를 참조할 수 있습니다. ajax 함수에 대한 jQuery 문서
5단계, 사용자에게 피드백 정보
먼저 정보가 성공적으로 제출된 후 JQuery는 다음 부분을 통해
의 내용을 동적으로 교체합니다. 간단한 문장만으로도 가능합니다.
");
두 번째로, 이 레이어를 갖는 것만으로는 충분하지 않습니다. 왜냐하면 콘텐츠가 없기 때문입니다. 따라서 id=message인 레이어에 일부 표시 콘텐츠를 추가해야 합니다.
$('#message').html ("
연락처 정보가 성공적으로 제출되었습니다!
.append("
곧 연락드리겠습니다.
")
마지막으로 제출 후 서버 처리의 동적 효과를 보여주기 위해 다음과 같은 특수 효과 코드를 설정했습니다..hide() //전체 레이어가 사라집니다
.fadeIn(1500, function() {//점진적으로 1500밀리초 이내에 표시됩니다.
/ /마지막으로 성공 아이콘을 동적으로 추가합니다.
$('#message').append("
")
}); 이 예를 실제로 적용하려면 아직 몇 가지 변경이 필요할 수 있습니다. 예를 들어 확인 정보 규칙을 추가하고 사용자가 정보를 제출하는 동안 로딩 아이콘을 설정하는 등의 작업을 수행합니다. 이 튜토리얼은 아이디어를 소개하는 데에만 사용됩니다. 또한, 백그라운드에서 데이터가 메일박스로 전송된다는 점을 참고하시기 바랍니다. 여기서는 이에 대한 설명을 생략하겠습니다. 패키지된 다운로드 예제에는 매우 자세한 설명이 있습니다. 변경해야 할 것은 사용자 이름과 비밀번호뿐입니다. 압축된 패키지를 다운로드한 후 내부에 runonload.js 파일이 있음을 확인할 수 있습니다. 이 파일의 기능은 양식 파일을 로드할 때 입력 양식에 집중하는 것입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
