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());
});

제가 무엇을 빠뜨리고 있나요?

먼저 폼을 주세요.idattribute를 다음에, 다음과 같이 코드를 사용합니다.

$(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