jQuery Ajax 함수에서 전체 양식을 데이터로 전달

jQuery ajax 기능이 있으며 전체 양식을 게시 데이터로 제출하고 싶습니다. 우리는 지속적으로 양식을 업데이트하고 있으므로 요청에서 보내야하는 양식 입력을 지속적으로 업데이트하는 것이 지루해집니다.

정확히 다음과 같은 기능이 있습니다.

http://api.jquery.com/serialize/

var data = $('form').serialize();
$.post('url', data);

post 메소드를 사용하여 양식을 보내려는 경우 serialize ()는 좋은 생각이 아닙니다. 예를 들어 ajax를 통해 파일을 전달하려는 경우 작동하지 않습니다.

이 ID가 "myform"인 양식이 있다고 가정하십시오.

더 나은 솔루션은 FormData를 만들고 전송하는 것입니다.

    var myform = document.getElementById("myform");
    var fd = new FormData(myform );
    $.ajax({
        url: "example.php",
        data: fd,
        cache: false,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (dataofconfirm) {
            // do something with the result
        }
    });

일반적으로 serialize()양식 요소에 사용 됩니다.

여러 <select> 옵션이 동일한 키로 직렬화된다는 점에 유의하십시오.

<select id="foo" name="foo" multiple="multiple">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

동일한 쿼리 매개 변수의 여러 항목을 포함하는 쿼리 문자열이 생성됩니다.

[path]?foo=1&foo=2&foo=3&someotherparams...

백엔드에서 원하는 것이 아닐 수도 있습니다.

이 JS 코드를 사용하여 여러 매개 변수를 쉼표로 구분 된 단일 키로 줄입니다 (John Resig의 자리에있는 스레드에서 주석 작성자의 응답에서 뻔뻔하게 복사 됨).

function compress(data) {
    data = data.replace(/([^&=]+=)([^&]*)(.*?)&\1([^&]*)/g, "$1$2,$4$3");
    return /([^&=]+=).*?&\1/.test(data) ? compress(data) : data;
}

위의 내용은 다음과 같습니다.

[path]?foo=1,2,3&someotherparams...

JS 코드에서 다음과 같이 호출합니다.

var inputs = compress($("#your-form").serialize());

도움이 되었기를 바랍니다.

사용하다

직렬화 ()

var str = $("form").serialize();

Ajax 요청에서 서버로 보낼 수있는 쿼리 문자열로 양식을 직렬화합니다.

이를 수행하는 좋은 jQuery 옵션은 FormData를 사용하는 것 입니다. 이 방법은 양식을 통해 파일을 보낼 때도 적합합니다!

<form id='test' method='post' enctype='multipart/form-data'>
   <input type='text' name='testinput' id='testinput'>
   <button type='submit'>submit</button>
</form>

jQuery의 보내기 기능은 다음과 같습니다.

$( 'form#test' ).submit( function(){
   var data = new FormData( $( 'form#test' )[ 0 ] );

   $.ajax( {
      processData: false,
      contentType: false,

      data: data,
      dataType: 'json',
      type: $( this ).attr( 'method' );
      url: 'yourapi.php',
      success: function( feedback ){
         console.log( "the feedback from your API: " + feedback );
      }
});

양식에 데이터를 추가하려면 양식에 숨겨진 입력을 사용하거나 즉시 추가 할 수 있습니다.

var data = new FormData( $( 'form#test' )[ 0 ] );
data.append( 'command', 'value_for_command' );

데이터를 게시하기 만하면됩니다. 및 jquery ajax 함수 세트 매개 변수 사용. 여기에 예가 있습니다.

<script>
        $(function () {

            $('form').on('submit', function (e) {

                e.preventDefault();

                $.ajax({
                    type: 'post',
                    url: 'your_complete url',
                    data: $('form').serialize(),
                    success: function (response) {
                        //$('form')[0].reset();
                       // $("#feedback").text(response);
                        if(response=="True") {
                            $('form')[0].reset();
                            $("#feedback").text("Your information has been stored.");
                        }
                        else
                            $("#feedback").text(" Some Error has occured Errror !!! ID duplicate");
                    }
                });

            });

        });
    </script>

다른 솔루션은 저에게 효과적이지 않았습니다. 내가 작업중인 프로젝트의 이전 DOCTYPE이 HTML5 옵션을 방지 할 수 있습니다.

내 솔루션 :

<form id="form_1" action="result.php" method="post"
 onsubmit="sendForm(this.id);return false">
    <input type="hidden" name="something" value="1">
</form>

js :

function sendForm(form_id){
    var form = $('#'+form_id);
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function(result) {
            console.log(result)
        }
    });
}