Jquery 양식 플러그인 또는 Jquery 직렬화?

Question

난 내가 새로운 jQuery를 1.5 기능을 사용할 수있는 형태로 플러그인으로가는 것을 선택 않는 경우 jQuery Form Plugin이 serialization?

이상이 있나요 장점 어떤 종류의 궁금?

양식 플러그인은 여러 게시물을 막을 수있는 것이 있습니까? 나는 보통 Ajax manager 플러그인을 사용하여 중복 된 아약스 게시물을 중지하지만 Form Plugin과 함께 사용할 수는 없다고 생각합니다.

감사

Answer 1

jQuery 양식 플러그인은 양식에 ajax를 사용하는 단순성을 제공합니다. 양식 속성을 사용하여 양식을 제출하는 방법 및 위치를 결정합니다. 양식의 메소드 속성은 플러그인에 요청 유형을 알려줍니다. 양식의 action 속성은 양식을 제출할 위치를 알려줍니다.대신

$.post("submit.php", $("#myform").serialize()); 

의

$('#myform').ajaxForm(); 

을 JQuery와 양식 플러그인은 또한 당신을 수 있습니다 : 본질적으로

<form id="myform" action="submit.php" method="post"> 
<!--inputs and submit button go here--> 
</form> 

은 당신이 쓸 수있는이 같은 예를 들어 양식을 고려

코드에서 Ajax를 통해 제출하십시오.

$('#myform').ajaxSubmit(); 

JQuery와 사용자가 서버에 제출하기 전에 직렬화해야 할 것, 플러그인 어쨌든 형태를 직렬화한다 형성한다. jQuery Form Plugin은 양식을 뒤에서 직렬화합니다. 위의 예제는 서버의 응답을 처리하지 않습니다.
아래 코드를 사용하면 class 속성에 "result"가 포함 된 요소에 응답을 추가 할 수 있습니다.

$('#myform').ajaxForm({ target : ".result"}); 

대상 옵션에 대해 jQuery에서 지원되는 모든 선택기를 사용할 수 있습니다.

지연된 메소드를 사용할 수 있는지 확실하지 않습니다. 호환성은 1.3.2+에 대한 것이고 기본 아약스 메소드는 플러그인에 포함되어 있기 때문에 나는 그걸 의심합니다. Deferred 객체는 플러그인 내부에서 결코 반환되지 않습니다.

jQuery 양식에는 사용할 수있는 beforeSubmit 옵션이 있습니다. 위의 코드를 추가하면 다음과 같이 표시됩니다.

$('#myform').ajaxForm({ target: ".result", beforeSubmit: function(arr, $form, options) { 
     // arr: The array of form data 
     // The array of form data takes the following form: 
     // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 

     //some code to check if we already submitted the form 

     // return false to cancel submit     
    } 
}); 

그러나 양식을 제출 한 후 사용자가 페이지를 완료하면 반대하는 것이 좋습니다. 클라이언트 측 코드에 불필요한 복잡성이 추가 될뿐입니다. 양식 제출 후 사용자가 페이지에서 다른 작업을 수행하는 것이 좋을 것입니다. jQuery Forms Plugin에는 서버가 200 "OK"응답을 반환하면 함수 콜백을 호출하는 success 옵션이있다. 플러그인에 대한 더 많은 정보는 플러그인 웹 사이트 http://jquery.malsup.com/form/에서 확인할 수 있습니다.

Answer 2

양식 플러그인을 사용하면, 하나의 호출에, $ 아약스 이벤트와 같은 옵션 능력과 아약스 통해 양식을 제출할 수 있다는 점에서 유용하다. 단순히 인터페이스를 납치하여 동작을 향상시키는 좋은 방법입니다. 그것은 당신이 아무것도 수정할 필요없이 가짜 아약스 (iframe)를 통해 파일 업로드를 부드럽게 처리하기 때문에 좋습니다.

제가 아는 한, 양식 플러그인은 다중 제출을 피하기 위해 아무 것도하지 않습니다. 매우 큰 프로젝트에서 다양한 일을하는 데 플러그인을 사용합니다. 일반적으로 양식이 중간 제출에 있는지 여부를 추적하고있는 경우 다시 제출할 수있는 기능을 입력하지 않도록 추가 코드를 통해 직접 처리합니다.

Answer 3

작업을 직렬화하고 양식을 제출하는 것과 같이 간단 할 때 특별히 양식 플러그인이 필요하지 않습니다. 플러그인에는 결코 사용하거나 필요하지 않을 수있는 기능을 포함 할 수 있습니다. 또한 jQuery에 대한 지식이 부족하거나 플러그인 작성 방법에 익숙하지 않은 경우 필요한 방식으로 사용자 정의하는 것이 쉬운 작업이 아닙니다. 나는 플러그인을 위해 간다. 태스크가 너무 복잡해서, 플러그인이 이미 있다면 휠을 다시 발명하는 이유가된다. 예를 들어 HSB 컨트롤이있는 색상 선택기가 있습니다. 색상이 어떻게 작동하는지 알지 못하면 연구를 수행하고 자신 만의 색상 선택 도구를 만드는 데 드는 시간과 노력이 최상위에 있습니다.

양식을 serialize하고 제출하는 기본 방법으로 다음 두 줄을 사용할 수 있습니다.

var data = $(form).serialize(); 
$.post('post.php', '&'+data); 

더 읽기에 대한 $ .post() 지금 당신은 당신이 당신의 양식 복잡한 일을 할 필요가 느끼는 그 기능이 이미 그때가 다치게하지 않습니다 일부 플러그인에서 사용할 수있는 경우 http://api.jquery.com/jQuery.post/#example-3

에서 그것을 밖으로 시도하고 그것이 당신을 위해 어떻게 작동하는지보십시오.

Answer 4

필자는 양식 플러그인을 들여다 보았고 jquery 사용 경험이 조금이라도 있으면 플러그인을 사용할 이유가 없다는 사실을 알았습니다. 쉬운 방법으로 일반 jquery를 사용하여 달성 할 수없는 것을 보지 못합니다. 아약스를 사용하여 전체 양식 데이터를 보내야하는 경우 serialize를 사용하십시오.

기본 AJAX 호출에 필요한 것은 이것뿐입니다.이 작업을 쉽게하기 위해 양식 플러그인이 할 수있는 일은 무엇입니까?

$.ajax({ 
    type: 'POST', 
    url: post/to/this/url, 
    data: $("#myForm").serializeArray(), 
    success: function() { 
    // Woopie success! 
    window.location.href = successurl; 
    }, 
    error: function(jqXHR, textStatus, errorThrown){ 
    // do something with errors 
    } 
}); 

Answer 5

Ajax를 사용하여 파일을 업로드하려면이 플러그인이 반드시 있어야합니다. serializeArray의 문서를 보면이 명확하게한다고 : 파일에서

데이터 요소를 선택하는 것은 직렬화하지

이 플러그인은 아무 문제없이 파일 업로드를 처리합니다.