jquery 폼 인증 플러그 인 jquery. form. js
1. JQuery 프레임 워 크 패키지 다운로드http://docs.jquery.com/Downloading_jQuery 2. Form 플러그 인 다운로드 https://github.com/malsup/form/blob/master/jquery.form.js 3. Form 플러그 인의 간단 한 입문 첫 번 째 단계: 먼저 폼 을 추가 합 니 다.
<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>두 번 째 단계: jquery. js 와 form. js 파일 포함
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
</head>폼 API
영문 원문:http://www.malsup.com/jquery/form/#api 폼 플러그 인 API 는 폼 데 이 터 를 쉽게 관리 하고 폼 제출 을 할 수 있 는 몇 가지 방법 을 제공 합 니 다. ajax Form 에 필요 한 모든 이벤트 모니터 를 추가 하여 AJAX 에 양식 을 제출 할 준 비 를 합 니 다.ajax Form 은 양식 을 제출 할 수 없습니다.document 의 ready 함수 에 서 는 ajaxform 을 사용 하여 AJAX 제출 폼 을 준비 합 니 다.ajax Form 은 0 개 또는 1 개의 인 자 를 받 습 니 다.이 하나의 매개 변 수 는 반전 함수 일 수도 있 고 Options 대상 일 수도 있 습 니 다.링크 가능 (Chainable): 네.실례:
$('#myFormId').ajaxForm();
ajax Submit 는 즉시 AJAX 가 양식 을 제출 합 니 다.대부분의 경우 ajax Submit 를 호출 하여 사용자 가 제출 한 폼 에 응답 합 니 다.ajax Submit 는 0 개 또는 1 개의 인 자 를 받 습 니 다.이 하나의 매개 변 수 는 반전 함수 일 수도 있 고 Options 대상 일 수도 있 습 니 다.링크 가능 (Chainable): 네. 실례: / / 귀속 폼 제출 이벤트 프로세서 $('\ # myFormId'). submit (function () { // 양식 을 제출 하 다 $(this).ajaxSubmit(); // 일반 브 라 우 저 에서 폼 제출 을 방지 하고 페이지 내 비게 이 션 생 성 (페이지 새로 고침 방지?) false 로 돌아 가기 return false; });
formSerialize 는 폼 을 검색 문자열 로 직렬 화 (또는 직렬 화) 합 니 다. 이 방법 은 다음 형식의 문자열 을 되 돌려 줍 니 다: name 1 = value 1 & name 2 = value 2. 링크 가능 (Chainable): 아니요, 이 방법 은 문자열 을 되 돌려 줍 니 다. 인 스 턴 스: var query String = $('\ # my FormId'). formSerialize (); / 현재 $. get, $. post, $. ajax 등 을 사용 하여 데 이 터 를 제출 할 수 있 습 니 다 $. post ('my script. php', query String);
fieldSerialize 는 폼 의 필드 요 소 를 직렬 화 (또는 직렬 화) 하여 검색 문자열 로 만 듭 니 다. 일부 폼 필드 만 직렬 화 (또는 직렬 화) 해 야 할 때 편리 합 니 다. 이 방법 은 다음 형식의 문자열 을 되 돌려 줍 니 다. name 1 = value 1 & name 2 = value 2. 링크 가능 (Chainable): 아니요, 이 방법 은 문자열 을 되 돌려 줍 니 다. 실례: var queryString = $('\ # myFormId. specialFields'). fieldSerialize ();
fieldValue 는 배열 에 삽 입 된 폼 요소 값 을 되 돌려 줍 니 다. 0.91 버 전부터 이 방법 은 항상 배열 형식 으로 데 이 터 를 되 돌려 줍 니 다. 요소 값 이 잘못 판정 되면 배열 이 비어 있 습 니 다. 그렇지 않 으 면 하나 이상 의 요소 값 을 포함 합 니 다. 링크 가능 (Chainable): 안 됩 니 다. 이 방법 은 배열 로 되 돌아 갑 니 다. 인 스 턴 스: / / 암호 입력 값 을 가 져 옵 니 다 var value = $('#myFormId :password').fieldValue(); alert('The password is: ' + value[0]);
resetForm 은 폼 요소 의 원래 DOM 방법 을 호출 하여 폼 을 초기 상태 로 복원 합 니 다. 링크 가능 (Chainable): 가능 합 니 다. 실례: $('\ # myFormId'). resetForm ();
clearform 폼 요 소 를 지 웁 니 다. 이 방법 은 모든 텍스트 (text) 입력 필드, 비밀번호 (password) 입력 필드 와 텍스트 영역 (textarea) 필드 를 비 워 두 고, 모든 select 요소 의 선택 을 지 우 며, 모든 선택 (radio) 단추 와 다 중 선택 (checkbox) 단 추 를 선택 하지 않 은 상태 로 초기 화 합 니 다. 링크 가능 (Chainable): 가능 합 니 다. $('\ # my FormId').clearForm();
clearFields 에서 필드 요 소 를 지 웁 니 다. 일부 폼 요 소 를 지 울 때 만 사용 할 수 있 습 니 다. 링크 가능 (Chainable): 가능 합 니 다.
$('#myFormId .specialFields').clearFields();
Options 대상 ajax Form 과 ajax Submit 은 많은 옵션 매개 변 수 를 지원 합 니 다. 이 옵션 매개 변 수 는 Options 대상 을 사용 하여 제공 할 수 있 습 니 다. Options 는 자바 스 크 립 트 대상 일 뿐 다음 과 같은 속성 과 값 의 집합 을 포함 합 니 다. target 은 페이지 에서 서버 응답 으로 업 데 이 트 된 요 소 를 가리 키 고 있 습 니 다. 요소 의 값 은 jQuery 선택 기 문자열 로 지 정 될 수 있 습 니 다.jQuery 대상 이나 DOM 요소 입 니 다. 기본 값: null. url 은 폼 데 이 터 를 제출 할 URL 을 지정 합 니 다. 기본 값: 폼 의 action 속성 값 type 폼 데 이 터 를 제출 하 는 방법 (method): "GET" 또는 "POST" 를 지정 합 니 다. 기본 값: 폼 의 method 속성 값 (기본 값 인 "GET" 를 찾 지 못 하면). beforeSubmit 폼 을 제출 하기 전에 호출 된 리 셋 함수 입 니 다. "beforeSubmit" 리 셋 함 수 는 갈고리 (hook) 로 서 사전 제출 논 리 를 실행 하거나 폼 데 이 터 를 검사 하 는 데 제 공 됩 니 다. "beforeSubmit" 리 셋 함수 가 false 로 돌아 가면 폼 은 제출 되 지 않 습 니 다. "beforeSubmit"리 셋 함수 에는 세 개의 호출 매개 변수 가 있 습 니 다. 배열 형식의 폼 데이터, jQuery 폼 대상, 그리고 ajax Form / ajax Submit 에 들 어 오 는 Options 대상 입 니 다. 폼 배열 은 다음 과 같은 방식 의 데 이 터 를 받 아들 입 니 다.
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
기본 값: null success 폼 을 성공 적 으로 제출 한 후 호출 된 리 셋 함수 입 니 다. "success" 리 셋 함 수 를 제공 하면 서버 에서 응답 을 되 돌려 받 은 후 호출 됩 니 다. 그리고 dataType 옵션 값 으로 responseText 를 전송 할 지 responseXML 의 값 을 결정 합 니 다. 기본 값: null dataType 되 돌아 오 기 를 원 하 는 데이터 형식 입 니 다. null, "xml", "script" 또는 "json" 중 하나 입 니 다. dataType 은 서버 응답 을 어떻게 처리 하 는 지 규정 하 는 방법 을 제공 합 니 다. 이것 은 jQuery. httpData 방법 에 직접 반 영 됩 니 다. 아래 값 은 지원 합 니 다. "xml": dataType = "xml" 이 라면 서버 응답 을 XML 로 처리 합 니 다."success" 리 셋 방법 이 지정 되 었 습 니 다. responseXML 값 을 되 돌려 줍 니 다. "json": dataType = = "json" 이 라면 서버 응답 은 값 을 구하 고 "success" 리 셋 방법 으로 전 달 됩 니 다. 지정 되면 "script": dataType = = "script" 이 라면 서버 응답 은 일반 텍스트 로 구 합 니 다. 기본 값: null (서버 가 responseText 값 을 되 돌려 줍 니 다) semantic Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type = "image". 불 로 고 는 데 이 터 를 의미 순서에 따라 엄격하게 제출 해 야 하 는 지 여 부 를 나타 낸다. 주의: 일반적으로 폼 은 의미 순서에 따라 직렬 화 (또는 직렬 화) 되 었 습 니 다.type = "image" 의 input 요 소 를 제외 합 니 다. 서버 에 엄격 한 의미 요구 와 폼 에 type = "image" 의 input 요 소 를 포함 하고 있다 면 semantic 를 true 로 설정 해 야 합 니 다. resetForm 불 로 고 는 폼 제출 이 성공 하면 리 셋 할 지 여 부 를 표시 합 니 다. 기본 값: null clearForm 불 로 고 는 폼 제출 에 성공 하면 폼 데 이 터 를 지 울 지 여 부 를 표시 합 니 다. 기본 값: null 인 스 턴 스: / / Options 대상 var options = {준비 target: '#divToUpdate', url: 'comment.php', success: function() { alert('Thanks for your comment!'); } }; // options 를 ajax Form $('\ # my Form'). ajaxform (options) 에 전달 합 니 다.
메모: Options 대상 은 jQuery 에 값 을 전달 하 는 $. ajax 방법 에 도 사용 할 수 있 습 니 다. $. ajax 가 지원 하 는 options 에 익숙 하 다 면 Options 대상 을 ajax Form 과 ajax Submit 에 전달 할 수 있 습 니 다.
전환 하 다 http://www.cnblogs.com/luluping/archive/2009/04/15/1436177.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
