Jquery 제출 양식 Form.js 공식 플러그인 소개_jquery

먼저 Ajax 및 Ajax 파일 업로드를 지원하는 일반적으로 사용되는 Form 플러그인에 대해 이야기하겠습니다. 이들은 강력하고 기본적으로 일상적인 애플리케이션을 충족할 수 있습니다.
1. 최신 JQuery 프레임워크 소프트웨어 패키지
jquery.js 압축 패키지
jquery.js 비압축 패키지
2. Form 플러그인
form.js
를 다운로드합니다.
3. 양식 플러그인에 대한 간단한 소개
1단계: 양식 추가
코드:

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

이름:
댓글:

2단계: jquery.js 및 form.js 파일 포함
코드:

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

< script type="text/javascript">
// DOM이 로드될 때까지 기다립니다.
$(document).ready(function() {
// 'myForm'을 바인딩하고 간단한 콜백 제공 function
$('#myForm').ajaxForm (function() {
alert("의견을 보내주셔서 감사합니다!");
})
< /script>



3. Form 플러그인의 자세한 사용 및 적용 예시
http://www.malsup.com/jquery/form/

===========================
이 플러그인 작성자는 form.js를 소개하면서 이렇게 말했습니다.
인용문:
AJAX로 양식을 제출하는 것이 이보다 더 쉬울 수는 없습니다!
Ajax를 사용하여 양식을 제출할 때 이보다 더 쉬울 수는 없습니다. 하하——, 물이 불어오는지 안 불어지는지는 사용해 보면 알 수 있습니다.

양식 플러그인 API

영문 원문: http://www.malsup.com/jquery/form/#api
양식 플러그인 API는 여러 가지 방법을 제공합니다. 쉽게 양식 데이터를 관리하고 양식을 제출할 수 있습니다.
ajaxForm
AJAX 제출을 위한 양식을 준비하는 데 필요한 모든 이벤트 리스너를 추가합니다. ajaxForm이 양식을 제출할 수 없습니다. 문서의 준비 기능에서 ajaxForm을 사용하여 양식의 AJAX 제출을 준비합니다. ajaxForm은 0 또는 1개의 매개변수를 허용합니다. 이 단일 매개변수는 콜백 함수이거나 옵션 객체일 수 있습니다.
체인 가능: 예.
예:
코드:

코드 복사 코드는 다음과 같습니다. $( '#myFormId').ajaxForm();

ajaxSubmit

양식은 AJAX에서 즉시 제출됩니다. 대부분의 경우 ajaxSubmit은 사용자가 양식을 제출하는 데 응답하기 위해 호출됩니다. ajaxSubmit은 0 또는 1개의 매개변수를 허용합니다. 이 단일 매개변수는 콜백 함수이거나 옵션 객체일 수 있습니다.
체인 가능: 예.

예:
코드:

코드 복사 코드는 다음과 같습니다. // 양식 제출 이벤트 핸들러 바인딩

$('#myFormId').submit(function() {

// 양식 제출
$(this).ajaxSubmit();
/ / 일반 브라우저가 양식 제출을 수행하고 페이지 탐색을 생성하는 것을 방지하려면(페이지 새로 고침을 방지하시겠습니까?) return false
return false
})
formSerialize


양식을 직렬화합니다. (또는 직렬화) 쿼리 문자열로 변환됩니다. 이 메소드는 name1=value1&name2=value2 형식의 문자열을 반환합니다.
체인 가능: 아니요, 이 메서드는 문자열을 반환합니다.

예:
코드:

코드 복사 코드는 다음과 같습니다. var queryString = $('#myFormId').formSerialize();

// 이제 $.get, $.post, $.ajax 등을 사용하여 데이터를 제출할 수 있습니다.

$.post(' myscript.php', queryString )
fieldSerialize


양식의 필드 요소를 쿼리 문자열로 직렬화(또는 직렬화)합니다. 이는 일부 양식 필드만 직렬화(또는 직렬화)해야 하는 경우에 편리합니다. 이 메소드는 name1=value1&name2=value2 형식의 문자열을 반환합니다.
체인 가능: 아니요, 이 메서드는 문자열을 반환합니다.
예:
코드:
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
삽입된 배열과 일치하는 양식 요소 값을 반환합니다. 버전 0.91부터 이 메서드는 항상 데이터를 배열로 반환합니다. 요소 값이 잠재적으로 유효하지 않은 것으로 판단되면 배열은 비어 있고, 그렇지 않으면 하나 이상의 요소 값을 포함합니다.
체인 가능: 아니요, 이 메서드는 배열을 반환합니다.
예:
코드:

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

// 비밀번호 입력값 가져오기
var value = $('#myFormId :password').fieldValue()
alert('비밀번호는 ' value[0]); 🎜>

양식 요소의 원래 DOM 메서드를 호출하여 양식을 초기 상태로 복원합니다.
체인 가능: 예.
예:
코드:
$('#myFormId').resetForm()
clearForm
양식 요소를 지웁니다. 이 메소드는 모든 텍스트 입력 필드, 비밀번호 입력 필드 및 텍스트 영역 필드를 지우고 선택 요소의 선택을 지우며 모든 라디오 버튼을 지우고 (체크박스) 버튼이 선택되지 않은 상태로 재설정됩니다.
체인 가능: 예.
코드:
$('#myFormId').clearForm()
clearFields
필드 요소를 지웁니다. 일부 양식 요소를 지워야 할 경우에만 사용하면 편리합니다.
체인 가능: 예.
코드:
$('#myFormId .specialFields').clearFields();
Options 객체
ajaxForm과 ajaxSubmit 모두 Options 객체를 사용하여 제공할 수 있는 다양한 옵션 매개변수를 지원합니다. 옵션은 다음과 같은 속성 및 값 모음을 포함하는 JavaScript 개체입니다.
target
은 서버 응답에 의해 업데이트되는 페이지의 요소를 나타냅니다. 요소의 값은 jQuery 선택기 문자열, jQuery 객체 또는 DOM 요소로 지정될 수 있습니다.
기본값: null.
url
양식 데이터 제출을 위한 URL을 지정합니다.
기본값: 양식의 작업 속성 값
type
양식 데이터 제출 방법을 지정합니다: "GET" 또는 "POST".
기본값: 양식의 메소드 속성 값(찾을 수 없는 경우 기본값은 "GET").
beforeSubmit
양식이 제출되기 전에 호출되는 콜백 함수입니다. "beforeSubmit" 콜백 함수는 사전 제출 논리를 실행하거나 양식 데이터의 유효성을 검사하기 위한 후크로 제공됩니다. "beforeSubmit" 콜백 함수가 false를 반환하면 양식이 제출되지 않습니다. "beforeSubmit" 콜백 함수는 세 가지 호출 매개변수, 즉 배열 형태의 양식 데이터, jQuery 양식 객체, ajaxForm/ajaxSubmit에 전달된 옵션 객체를 사용합니다. 양식 배열은 다음과 같은 방식으로 데이터를 허용합니다:
코드:
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
기본값 :null
success
양식이 성공적으로 제출된 후 호출되는 콜백 함수입니다. "성공" 콜백 함수가 제공되는 경우 서버에서 응답이 반환될 때 호출됩니다. 그런 다음 dataType 옵션 값은 responseText 또는 responseXML 값이 반환되는지 여부를 결정합니다.
기본값: null
dataType
반환될 것으로 예상되는 데이터 유형입니다. null, "xml", "script" 또는 "json" 중 하나입니다. dataType은 서버의 응답을 처리하는 방법을 지정하는 메서드를 제공합니다. 이는 jQuery.httpData 메소드에 직접 반영됩니다. 다음 값이 지원됩니다.
'xml': dataType == 'xml'이면 서버 응답이 XML로 처리됩니다. 동시에 "success" 콜백 메서드가 지정되면 responseXML 값이 반환됩니다.
'json': dataType == 'json'인 경우 서버 응답이 평가되어 지정된 경우 "성공" 콜백 메서드에 전달됩니다.
'script': dataType == 'script'인 경우 서버 응답은 일반 텍스트로 평가됩니다.
(주석: 위의 일부 내용이 명확하지 않아 원래의 의미를 표현하고자 일부 내용을 바꾸어 설명했습니다.)
기본값: null (서버가 responseText 값을 반환함)
semantic
데이터를 엄격한 의미 순서로 제출해야 하는지 여부를 나타내는 부울 플래그(느림). 정규 형식 직렬화는 type="image"의 입력 요소를 제외하고 의미 순서로 수행됩니다. 서버에 엄격한 의미론적 요구 사항이 있고 양식에 type="image"의 입력 요소가 포함되어 있으면 true입니다.
데이터를 엄격한 의미론적 순서로 제출해야 하는지 여부를 나타내는 부울 플래그입니다(느리나요?). 참고: 일반적으로 양식은 type="image"의 입력 요소를 제외하고 의미 순서에 따라 직렬화(또는 직렬화)됩니다. 서버에 엄격한 의미 체계 요구 사항이 있고 양식에 type="image"의 입력 요소가 포함되어 있는 경우 의미 체계를 true로 설정해야 합니다. (번역 참고: 이 문단이 이해하기 어렵기 때문에 번역이 명확하지 않을 수 있지만 정정해 주시기 바랍니다.)
기본값: false
resetForm
양식이 성공적으로 제출된 경우 재설정할지 여부를 나타내는 부울 플래그 .
기본값: null
clearForm
양식이 성공적으로 제출된 경우 양식 데이터를 지울지 여부를 나타내는 부울 플래그입니다.
기본값: null
인스턴스:
코드:
[/code]
// 옵션 객체 준비
var options = {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('댓글을 주셔서 감사합니다!')
}
// ajaxForm에 옵션 전달
$('#myForm').ajaxForm(options);
[/code]
참고: Options 개체를 사용하여 jQuery의 $.ajax 메서드에 값을 전달할 수도 있습니다. $.ajax에서 지원하는 옵션에 익숙하다면 이를 사용하여 옵션 개체를 ajaxForm 및 ajaxSubmit에 전달할 수 있습니다.