복붙노트

[JQUERY] jQuery를 아약스 기능의 데이터로 전체 양식에 합격

JQUERY

jQuery를 아약스 기능의 데이터로 전체 양식에 합격

해결법


  1. 1.정확히이 일을하는 기능이있다 :

    정확히이 일을하는 기능이있다 :

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

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

  2. 2.당신이 게시 방법과 양식을 보내려면 직렬화 ()는 좋은 아이디어가 아닙니다. 예를 들어, 당신은 아약스는없는 거 작업을 통해 파일을 전달하려면.

    당신이 게시 방법과 양식을 보내려면 직렬화 ()는 좋은 아이디어가 아닙니다. 예를 들어, 당신은 아약스는없는 거 작업을 통해 파일을 전달하려면.

    "myForm을"우리가이 ID로 양식을 가지고 있다고 가정하자.

    더 나은 솔루션은 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
            }
        });
    

  3. 3.폼 요소에 통용 직렬화 ()이다.

    폼 요소에 통용 직렬화 ()이다.

    여러가 <선택> 염두하시기 바랍니다 옵션은, 예를 들어, 같은 키에 직렬화

    <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 코드를 사용 :

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

    희망이 도움이.


  4. 4.사용하다

    사용하다

    직렬화 ()

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

    Ajax 요청의 서버에 전송 될 수있는 쿼리 문자열에 양식을 직렬화합니다.


  5. 5.이 작업을 수행하는 좋은 jQuery를 옵션은 FormData하는 것입니다. 형태를 통해 파일을 보낼 때이 방법도 적합합니다!

    이 작업을 수행하는 좋은 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' );
    

  6. 6.당신은 데이터를 게시해야합니다. 및 JQuery와 AJAX 기능 설정 파라미터를 사용. 다음은 예이다.

    당신은 데이터를 게시해야합니다. 및 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>
    

  7. 7.다른 솔루션은 나를 위해 작동하지 않았다. 어쩌면 프로젝트에서 이전 DOCTYPE 나는 방지의 HTML5 옵션에서 일하고 있습니다.

    다른 솔루션은 나를 위해 작동하지 않았다. 어쩌면 프로젝트에서 이전 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)
            }
        });
    }
    
  8. from https://stackoverflow.com/questions/2019608/pass-entire-form-as-data-in-jquery-ajax-function by cc-by-sa and MIT license