JavaScript와 AJAX의 경우 여전히 <form> 태그가 필요하며 "제출"버튼을 사용하여 양식을 서버에 제출해야합니까?

Question

위로 HTML을 배웠을 때 CGI가 왕이었습니다. 서버와 상호 작용하는 적절한 방법은 태그를 <form> 태그 안에 넣는 것입니다. 사용자가 "제출"버튼을 누르면 HTTP GET 또는 HTTP POST 메시지가 서버로 보내지고 서버의 CGI 프로그램에서 반환 된 HTML 코드를 사용하여 브라우저가 새로 고쳐집니다.

이제 웹 작업을 다시 시작했으며 자바 스크립트와 jQuery를 배우게되었습니다. jQuery는 click, keypress 및 focusout과 같은 이벤트를 가로 채고 $.ajax() 및 $.getJSON()으로 데이터를 읽을 수 있으므로 <form> 태그가 필요합니까?

JavaScript를 사용하지 않는 사용자를 지원하려면 "실제 양식"이 필요할 수 있습니다.

Answer 1

양식은 여전히 ​​도움이 될 수 있지만 짧은 대답은 '아니오'입니다.

특정 AJAX 요청과 관련된 입력 그룹이있는 경우 유효성 검사/직렬화를 위해 입력 양식을 자체 양식으로 보관하는 것이 더 쉽습니다. 예를 들어 :

$.ajax({ 
    url: 'ajax/test.html', 
    dataType: 'json', 
    method: 'POST', 
    content: $('form#login_form').serialize(), // <-- Serialize elements only in 
    success: function(data) {     //  the login_form container. 
     $('.result').html(data); 
    } 
}); 

사용자의 요구 사항에 따라 필요은 자바 스크립트가 꺼져있는 사용자의 좋은 저하 주변에 양식을 유지 할 수 있습니다. 양식을 제출해야하므로 양식을 설정하고 제자리에 두는 것이 좋습니다.

Answer 2

아약스를 사용하는 경우 직접 글이나 가져 오기가없는 한 양식 태그가 필요하지 않습니다. 그러나, 그것은 여전히 ​​좋은 html 디자인입니다.

Answer 3

제출할 수도 있고하지 않을 수도 있습니다. 변경 사항을 청취 할 양식 요소에 따라 달라질 수 있습니다. 하지만 다음과 같이 할 수 있습니다.

<SELECT NAME="tree" onchange="doSomething(someVar);"> 

다시 말해서 페이지의 어떤 요소를 조작 할 것인지에 따라 달라집니다.