AJAX 및 jQuery를 사용하여 양식 제출

AJAX 및 jQuery를 사용하여 양식 제출

---

이것은 몇 줄 이상의 코드없이 jQuery에 내장 된 것으로 보이지만 "간단한"솔루션을 찾을 수 없습니다. HTML 양식이 있습니다.

<form method="get" action="page.html">
    <input type="hidden" name="field1" value="value1" />
    <input type="hidden" name="field2" value="value2" />
    <select name="status">
         <option value=""></option>
         <option value="good">Good</option>
         <option value="bad">Bad</option>
    </select>
</form>

누군가 선택 필드를 변경하면 데이터베이스를 업데이트하기 위해 ajax를 사용하여 양식을 제출하고 싶습니다. 값 / 속성을 수동으로 생성하지 않고 다음과 같이 모두 보낼 수있는 방법이 있다고 생각했습니다.

$("select").change(function(){
    $.get("page.html?" + serializeForm());
});

내가 무엇을 놓치고 있습니까?

---

먼저 양식에 id속성을 부여한 다음 다음과 같은 코드를 사용하십시오.

$(document).ready( function() {
  var form = $('#my_awesome_form');

  form.find('select:first').change( function() {
    $.ajax( {
      type: "POST",
      url: form.attr( 'action' ),
      data: form.serialize(),
      success: function( response ) {
        console.log( response );
      }
    } );
  } );

} );

따라서이 코드는 .serialize()양식에서 관련 데이터를 가져 오는 데 사용 합니다. 또한 관심있는 선택 항목이 양식의 첫 번째 항목이라고 가정합니다.

향후 참조를 위해 jQuery 문서 는 매우 훌륭합니다.

---

HTML 양식을 비동기 적으로 보낼 수 있는 멋진 양식 플러그인 이 있습니다.

$(document).ready(function() { 
    $('#myForm1').ajaxForm(); 
});

또는

$("select").change(function(){
    $('#myForm1').ajaxSubmit();
});

즉시 양식 제출

---

이것이 결국 작동하게 된 것입니다.

$("select").change(function(){
    $.get("/page.html?" + $(this).parent("form").find(":input").serialize()); 
});

참고 URL : https://stackoverflow.com/questions/425095/submit-form-using-ajax-and-jquery