Ajax를 사용하여 jQuery.form.js 플러그인_javascript 기술을 통해 jQuery 기반 양식 제출-JS 튜토리얼-php.cn

Ajax를 사용하여 jQuery.form.js 플러그인_javascript 기술을 통해 jQuery 기반 양식 제출

WBOY

풀어 주다： 2016-05-16 15:44:52

원래의

1700명이 탐색했습니다.

양식을 제출할 때 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 플러그인을 통해 양식을 제출하는 방법을 자세히 소개합니다.