jQuery를 사용하여 많은 필드가있는 양식을 게시하는 방법은 무엇입니까?

Question

아약스 일을하기 위해 $ .ajax()를 사용할 수는 있지만 큰 폼의 값을 게시하기에는 적합하지 않다고 생각합니다.

post 큰 폼 (많은 필드)을 모두 손으로 입력하지 않으려면 어떻게해야합니까?

Answer 1

그 가정에 대한 추론은 무엇입니까? POST는 GET보다 많은 양의 데이터를 전송하도록 설계되었습니다. AJAX POST 요청은 "정상적인"POST 요청과 거의 동일합니다.이 요청은 번들로 제공되어 약간 다른 방식으로 브라우저에서 내부적으로 처리됩니다. 두 개의 헤더가 약간 다를 수 있지만 데이터는 모두 동일합니다. 왜 AJAX는 "큰"형식을 처리하지 못합니까?

어쨌든 "대형"양식으로 정의 할 수도있는 것이 무엇입니까?

편집 : 질문 해 주셔서 감사합니다. 네가 지금 묻고있는 것을 이해하고 네가 어디에서 왔는지 알 겠어. 입력이 많은 양식의 경우 항상 Ajax 요청으로 묶는 것이 어려울 수 있습니다.

jQuery를 사용하고 있으므로이 문제를 쉽게 해결할 수 있습니다. serialize() 방법을 확인하십시오. 폼에 입력하면 Ajax 요청에 직접 전달할 수있는 모든 양식 입력 요소 및 값에 대한 쿼리 문자열이 반환됩니다. 매뉴얼 페이지에는 어떻게 끝나는 지 보여주는 예제가있다.

당신이해야 할 모든

은 이것이다 :

"form"이 양식의 ID입니다

$.ajax({ 
    data: $("form").serialize(), 
    //etc. 
}); 

.

Answer 2

당신이 묻는 것은 어렵지 않습니다. 양식의 내용을 수집하여 서버에 전달하기 만하면됩니다 (대개 JSON 사용).

이 하우투에서보세요 :

http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59

Answer 3

아직 그것을 시도하지 않은 경우. 그런 다음 BIG 양식을 작성한 다음 (현재 의미하는대로) $.ajax() 또는 jQuery Forms 플러그인을 사용하여 게시하십시오. 이런 종류의 사안인지 아닌지 알 수 있습니다!

편집 : - (편집 후) forms plugin은 당신을위한 것입니다! 한번 해봐.

Answer 4

jQuery.ajax(options)은 더 간단하므로 jQuery.post(url, data, callback, type)을 사용할 수 있습니다.

serialize을 사용하면 전체 양식을 자동으로 보낼 수 있습니다.

$.post("/post_handler/", 
    $("form#my_form").serialize(), 
    function(json){ 
     /*your success code*/ 
    }, "json"); 

더 완벽한 예 :

<script> 
$().ready(function(){ 
    $("form#my_form submit").click(function(){ 
     $.post("/post_handler/", 
      $("form#my_form").serialize(), 
      function(json){ 
       /*your success code*/ 
      }, "json"); 
     return false; 
    }); 
} 
</script> 
<form id="my_form" action="/post_handler/" method="post"> 
    <input type="text" name="text1" value="my text 1" /> 
    <input type="text" name="text2" value="my text 2" /> 
    <input type="submit" name="submit_button" value="Send" /> 
</form> 

이 기본 post을 무시하고, AJAX와 그것을 수행 할 것입니다.

Answer 5

jquery form plugin을 사용해보십시오.

아마 당신이 상자에서해야 할 일을 정확하게 수행합니다.

Answer 6

각 요소를 수동으로 처리하지 않으려면 serialize을 사용하는 것이 좋습니다.

$.ajax({ 
    type: "POST", 
    url: "form.php", 
    data: $("#form_id").serialize() 
    success: function(msg) { 
    alert("Form Submitted: " + msg); 
    } 
}); 

Answer 7

$ .ajax()와 다소 복잡한 (큰) 양식을 보냈으며 문제가 없습니다. 아약스 요청을 통해 파일을 보냈지 만 완료된 것을 보았습니다. 업로드하는 동안 브라우저를 묶지 않아 기존 게시물이 더 잘 작동합니다.

@zombat에 대한 귀하의 의견을 토대로 생각해 보면, 여러분은 매우 많은 수의 입력을 가지고 있다고 생각합니다. 그 중 대부분은 대부분 공백이 될 것입니다. 두 가지 제안은 여기 1) 입력을 별도의 양식으로 나누고 터치/완료되는 즉시 각 양식을 보냅니다. 2) JavaScript로 폼의 상태를 검사하고 정보를 JSON 또는 XML로 래핑하고 폼 데이터를 게시하는 대신 데이터 구조 만 게시하십시오.

"Large"는 문제가 아니어야합니다. 전송하기 어려운 이유를 모든 사람이 알 수 있도록 데이터를 설명하는 더 나은 형용사를 찾을 수 있습니다.