jQuery Mobile - Ajax Form Submission(폼 전송)

JQM에서 폼 전송은 Ajax를 사용하여 자동적으로 동작하고, form과 결과 페이지 간의 이동을 자연스럽게 만들어 줍니다. Form submit을 보장하기 위해 action 과 method properties가 폼 요소로 명시 되어져야 합니다. 명시되지 않을 경우 method는 디폴트인 get으로 action는 $.mobile.path.get()을 통해 현재 페이지와 관련된 경로를 디폴트로 갖게 됩니다.

form들은 앵커 태그와 같은 전송을 위한 속성을 수용합니다. Data-transition=”pop”과 data-direction=”reverse” 처럼 Ajax를 사용하지 않고 폼을 전송하기도 합니다. 전역적으로 Ajax 사용을 disable할 수 있고, data-ajax=”false”속성을 통해 폼 마다 적용할 수도 있습니다. 폼이 전송될 때 Form에 존재하는 Target=”_blank” 와 같은 Target 속성의 브라우저 처리를 기본으로 합니다. 앵커 태그와 달리 rel 속성은 양식에 허용되지 않음을 알아주세요.

Non-ajax handling
자동적으로 Ajax로 처리되는 폼 전송을 방지하기 위해 data-ajax=”false”속성을 폼 요소에 추가합니다. 또한, 전역적인 설정 옵션인 ajaxFormsEnabled를 통해 Ajax 폼 전송을 변경할 수 있습니다.

Simple ajax form example
이 샘플은 자동적으로 Ajax 처리되는 폼 전송을 보여줍니다. 이 폼은 get방식으로 다른 페이지를 요청하게 됩니다. 폼을 전송할 때 JQM은 지정된 URL이 Ajax를 통해 검색 가능한지 확인하고 적절하게 처리 할 수 있습니다. 일반적인 HTML 폼 전송과 마찬가지로, JQM은 정상적으로 응답 페이지가 처리되면 Url hash를 업데이트 하며 북마크되고 결과 페이지를 get방식으로 가져올 수 있습니다. 또한, post방식의 전송은 hash에 query parameter들을 포함하지 않고 요청하며 북마크가 되지 않습니다.

<form action="JQM_fe5-1.html" method="get">
<fieldset>
<div data-role="fieldcontain">
    <label for="shipping" class="select">Choose shipping method:</label>
    <select name="shipping" id="shipping">
        <option value="Standard shipping">Standard: 7 day</option>
        <option value="Rush shipping">Rush: 3 days</option>
        <option value="Express shipping">Express: next day</option>
        <option value="Overnight shipping">Overnight</option>
    </select>
</div>
<button type="submit" data-theme="a" name="submit" value="submit-value">Submit</button>
</fieldset>
</form>

<div> 선택하신 select 값은?</div>
<strong><div id="result"></div></strong>

<script type="text/javascript">
$("#result").text($("#shipping").val() + " 입니다.");
</script>