jquery 양식 플러그인 양식 사용 방법에 대한 자세한 설명

迷茫
풀어 주다: 2017-01-24 15:27:43
원래의
1623명이 탐색했습니다.

기존의 양식 제출은 모두 페이지 점프 형식이지만 지금은 Ajax 제출이 더 인기가 있습니다. 그렇다면 양식 제출의 단순성과 Ajax의 효과를 원한다면 해결책이 있을까요?

사용 방법

두 가지 사용 방법:

첫 번째 방법

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>
  // 使用ajaxForm
  $(function(){
   $("#myForm").ajaxForm(function(){
    $("#output1").html("提交成功").show();
   })
  })
 </script>
</head>
<body>
 <form id="myForm">
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="submit" value="提交">
  <div id="output1" style="display: none"></div>
 </form>
</body>
</html>
로그인 후 복사

두 번째 방법

아아아아

첫 번째 방법이 더 편리한 것 같아요.
function() 매개변수는 제출 성공 후의 콜백 함수입니다.

이 제출 방법을 사용하면 비동기 양식 제출이 가능해 매우 편리합니다. 하지만 여전히 약간 불만족스럽습니다. 예를 들어 양식 제출 작업 외부에서 수동으로 수행할 수 있지만 매우 번거롭습니다. 양식 플러그인이 이러한 기능을 상속합니까?

2. 옵션 매개변수

위에서는 양식에 있는 하나의 함수 콜백 함수 매개변수에 대해서만 설명합니다. 실제로 옵션이라는 또 다른 매개변수도 있습니다. 무슨 소용이 있나요?

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>
  $(function(){
   //方式二 与方式一效果一样
   $("#myForm").submit(function(){
    // 使用ajaxSubmit
    $(this).ajaxSubmit(function(){
     $("#output1").html("提交成功").show();
    });
    return false;
   })
  })
 </script>
</head>
<body>
 <form id="myForm">
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="submit" value="提交">
  <div id="output1" style="display: none"></div>
 </form>
</body>
</html>
로그인 후 복사

beforeSubmit의 콜백 함수 fun1에는 formData, jqForm, fieldValue의 세 가지 방법으로 양식 데이터를 가져오는 것을 볼 수 있으며, 이는 값을 얻는 다양한 방법을 만족하는지 확인할 수 있습니다. . false를 반환하는 한 양식이 제출되지 않도록 할 수 있습니다. 성공 콜백의 fun2에도 상태 값이 있으며 서버에서 데이터를 반환하는 방식으로 처리할 수 있습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!