집 >웹 프론트엔드 >JS 튜토리얼 >jquery 양식 플러그인 양식 사용 방법에 대한 자세한 설명

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

迷茫원래의: 2017-01-24 15:27:431658검색

기존의 양식 제출은 모두 페이지 점프 형식이지만 지금은 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에도 상태 값이 있으며 서버에서 데이터를 반환하는 방식으로 처리할 수 있습니다.

성명：

이전 기사：JavaScript의 함수형 프로그래밍 소개다음 기사：JavaScript의 함수형 프로그래밍 소개

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

관련 기사