Ajax를 사용하여 jQuery.form.js 플러그인_javascript 기술을 통해 jQuery 기반 양식 제출
- WBOY원래의
- 2016-05-16 15:44:521712검색
양식을 제출할 때 ajax를 사용하지 않으면 페이지가 자동으로 새로 고쳐지는데 이는 매우 불친절하므로 사용자가 At에 있음을 명확하게 알 수 있도록 양식 제출을 ajax 모드로 수정해야 합니다. 양식이 제출된 단계는 어느 단계입니까? 제출 중입니까? 제출이 성공했나요?
간략하게 사용해본 jQuery Form 플러그인은 다음과 같은 장점이 있습니다.
1. 제출 전 검증을 지원합니다
2. 제출 후 콜백을 지원합니다
3. AJAX 방식을 채택하여 좋은 사용자 경험을 선사하세요
4. 제출 방법은 유연합니다. 제출하려는 양식을 지정하면 됩니다.
5. xml, json 등 다양한 유형의 데이터 제출을 지원합니다.
주요 기능:
1.ajaxForm
AJAX 제출을 위한 양식을 준비하는 데 필요한 모든 이벤트 리스너를 추가합니다. ajaxForm이 양식을 제출할 수 없습니다. 문서의 준비 기능에서 ajaxForm을 사용하여 양식의 AJAX 제출을 준비합니다. ajaxForm은 0 또는 1개의 매개변수를 허용합니다. 이 단일 매개변수는 콜백 함수이거나 옵션 객체일 수 있습니다.
예:
$('#myFormId').ajaxForm();
2.ajax제출
양식은 AJAX를 통해 즉시 제출됩니다. 대부분의 경우 ajaxSubmit은 사용자가 양식을 제출하는 데 응답하기 위해 호출됩니다. ajaxSubmit은 0 또는 1개의 매개변수를 허용합니다. 이 단일 매개변수는 콜백 함수이거나 옵션 객체일 수 있습니다.
예:
// 绑定表单提交事件处理器
$('#myFormId').submit(function() {
// 提交表单
$(this).ajaxSubmit();
// 为了防止普通浏览器进行表单提交和产生页面导航（<span style="color: #333333;"><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian" target="_blank"><span style="color: #333333;">防止页面刷新</span></a></span>？）返回false
return false;
});
3.formSerialize
양식을 쿼리 문자열로 직렬화(또는 직렬화)합니다. 이 메소드는 name1=value1&name2=value2 형식의 문자열을 반환합니다. 이 메서드는 문자열을 반환합니다.
예:
var queryString = $('#myFormId').formSerialize();
// 现在可以使用$.get、$.post、$.ajax等来提交数据
$.post('myscript.php', queryString);
4.field직렬화
양식의 필드 요소를 쿼리 문자열로 직렬화(또는 직렬화)합니다. 이는 일부 양식 필드만 직렬화(또는 직렬화)해야 하는 경우에 편리합니다. 이 메소드는 name1=value1&name2=value2 형식의 문자열을 반환합니다. 이 메서드는 문자열을 반환합니다.
예:
var queryString = $('#myFormId .specialFields').fieldSerialize();
5.필드값
삽입된 배열과 일치하는 양식 요소 값을 반환합니다. 버전 0.91부터 이 메서드는 항상 데이터를 배열로 반환합니다. 요소 값이 잠재적으로 유효하지 않은 것으로 판단되면 배열은 비어 있고, 그렇지 않으면 하나 이상의 요소 값을 포함합니다. 이 메서드는 배열을 반환합니다.
예:
// 取得密码输入值
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);
6.resetForm
양식 요소의 원래 DOM 메서드를 호출하여 양식을 초기 상태로 복원합니다.
예:
$('#myFormId').resetForm();
7.clearForm
양식 요소를 지웁니다. 이 메소드는 모든 텍스트 입력 필드, 비밀번호 입력 필드 및 텍스트 영역 필드를 지우고 선택 요소의 선택을 지우며 모든 라디오 버튼을 지우고 (체크박스) 버튼이 선택되지 않은 상태로 재설정됩니다.
예:
$('#myFormId').clearForm();
8.clearFields
필드 요소를 지웁니다. 일부 양식 요소를 지워야 할 경우에만 사용하면 편리합니다.
예:
$('#myFormId .specialFields').clearFields();
jQuery Form 플러그인의 간단한 예:
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Jquery</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery-1.4.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery.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!");
});
});
// attach handler to form's submit event
$('#myFormId').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});
</script>
</head>
<body>
<form id="myForm" action="index.jsp" method="post">
Name: <input type="text" name="name" />
Comment:<textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
</body>
</html>
이 글에서는 jQuery가 ajax를 사용하여 jQuery.form.js 플러그인을 통해 양식을 제출하는 방법을 자세히 소개합니다.