복붙노트

[JQUERY] jQuery를 AJAX는 양식을 작성하여 제출

JQUERY

jQuery를 AJAX는 양식을 작성하여 제출

해결법

  1. 1.당신은 아약스 양식 플러그인 또는 JQuery와 직렬화 기능에서 ajaxForm / ajaxSubmit 기능을 사용할 수 있습니다.

    당신은 아약스 양식 플러그인 또는 JQuery와 직렬화 기능에서 ajaxForm / ajaxSubmit 기능을 사용할 수 있습니다.

    AjaxForm :

    $("#theForm").ajaxForm({url: 'server.php', type: 'post'})

    또는

    $("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

    제출 버튼을 누를 때 ajaxForm을 보내드립니다. ajaxSubmit 즉시 전송합니다.

    직렬화 :

    $.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

    AJAX 직렬화 문서는 여기에있다.

  2. 2.이것은 간단한 참조입니다 :

    이것은 간단한 참조입니다 :

    // this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');
    
    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    
});

  3. 3.폼 요소에 정의 된 속성을 사용하는 또 다른 유사 솔루션 :

    폼 요소에 정의 된 속성을 사용하는 또 다른 유사 솔루션 :

    <form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>

  4. 4.유념해야 할 몇 가지가있다.

    유념해야 할 몇 가지가있다.

    1. 양식을 제출 방법에는 여러 가지가 있습니다

    우리는 따라서 양식 제출 이벤트가 아닌 버튼 클릭 이벤트에 결합한다. 이것은 현재와 미래의 모든 장치와 보조 기술에 대한 우리의 코드가 작동을 보장합니다.

    2. Hijax

    사용자는 자바 스크립트를 사용할 수 없을 수 있습니다. hijax 패턴은 우리가 부드럽게 자바 스크립트를 사용하여 양식의 컨트롤을하지만, 자바 스크립트가 실패하는 경우가 submittable 떠날 경우, 여기 좋다.

    우리는 HTML 변경이, 우리는 자바 스크립트를 업데이트 할 필요가 없습니다 그렇다면, 양식에서 URL 및 방법을 당겨해야한다.

    3. 겸손한 자바 스크립트

    이 거품까지 이벤트를 허용하는 대신 반환 거짓의에서는 event.preventDefault ()를 사용하면 좋습니다. 이것은 다른 스크립트는 사용자 상호 작용을 모니터링 할 수있다 예를 들어 분석 스크립트 이벤트로 묶을 수 있습니다.

    속도

    우리는 이상적으로 오히려 우리의 스크립트를 인라인으로 삽입하는 것보다, 외부 스크립트를 사용해야합니다. 우리는 속도에 대한 페이지의 하단에 그것에 스크립트 태그를 사용하여 페이지 또는 링크의 헤드 섹션에서 링크 할 수 있습니다. 이 스크립트는 조용히 방해하지, 사용자 경험을 향상한다.

    암호

    당신이 모두와 함께 위를 동의하고는 AJAX (A hijax 패턴), 당신은 같은 것을 할 수 있습니다 통해 그것을 이벤트를 제출하고 처리 잡으려면 가정 :

    $(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});

    당신은 같은 것을 사용하여 자바 스크립트를 통해 언제든지 수동으로 양식 제출을 트리거 할 수 있습니다 :

    $(function() {
  $('form.my_form').trigger('submit');
});

    편집하다:

    나는 최근에이 작업을 수행했고, 플러그인을 작성 끝났다.

    (function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      }).done(function(data) {
        // Optionally alert the user of success here...
      }).fail(function(data) {
        // Optionally alert the user of an error here...
      });
    });
    return this;
  }
})(jQuery)

    양식 태그에 데이터 autosubmit 속성을 추가하면 다음이 작업을 수행 할 수 있습니다

    <form action="/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

    $(function() {
  $('form[data-autosubmit]').autosubmit();
});

  5. 5.당신은 또한 (IE에서 사용할 수 있지만) FormData를 사용할 수 있습니다 :

    당신은 또한 (IE에서 사용할 수 있지만) FormData를 사용할 수 있습니다 :

    var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector        
$.ajax({
    type: "POST",
    url: "yourURL",// where you wanna post
    data: formData,
    processData: false,
    contentType: false,
    error: function(jqXHR, textStatus, errorMessage) {
        console.log(errorMessage); // Optional
    },
    success: function(data) {console.log(data)} 
});

    이것은 당신이 FormData를 사용하는 방법이다.

  6. 6.

    <form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>

    그것은 Alfrekjv의 대답의 수정 된 버전입니다

    자바 스크립트

    jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

    내가 편집 Alfrekjv의 대답에 싶었지만 너무 너무 별도의 답변으로이를 게시하기로 결정에서 이탈.

    파일을 전송하지 않습니다, 버튼 (A 버튼을 제출 포함) 형태의 데이터로 그 값을 전송을 클릭 예를 들어, 버튼을 지원하지 않습니다, 그러나 이것은 아약스 요청이기 때문에 버튼 클릭이 전송되지 않습니다.

    지원 버튼에 대신 제출의 실제 버튼 클릭을 캡처 할 수 있습니다.

    jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});

    서버에 당신이 JQuery와 세트가이 헤더와 아약스 요청 HTTP_X_REQUESTED_WITH를 감지 할 수 있습니다 PHP를 위해

    PHP

    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

  7. 7.이 코드는 파일 입력으로도 작동

    이 코드는 파일 입력으로도 작동

    $(document).on("submit", "form", function(event)
{
    event.preventDefault();        
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        
});

  8. 8.나는 정말 jQuery 플러그인에서 superluminary 특히 그는 포장 방법은 용액이 답변을 좋아했다. 덕분에 매우 유용한 답변에 대한 superluminary합니다 그래서. 내 경우에는, 그러나, 나는 플러그인이 초기화 될 때 나 옵션에 의해 성공 및 오류 이벤트 핸들러를 정의 할 수 있도록 해주는 플러그인을 원했다.

    나는 정말 jQuery 플러그인에서 superluminary 특히 그는 포장 방법은 용액이 답변을 좋아했다. 덕분에 매우 유용한 답변에 대한 superluminary합니다 그래서. 내 경우에는, 그러나, 나는 플러그인이 초기화 될 때 나 옵션에 의해 성공 및 오류 이벤트 핸들러를 정의 할 수 있도록 해주는 플러그인을 원했다.

    그래서 여기 내가 생각 해낸 것입니다 :

    ;(function(defaults, $, undefined) {
    var getSubmitHandler = function(onsubmit, success, error) {
        return function(event) {
            if (typeof onsubmit === 'function') {
                onsubmit.call(this, event);
            }
            var form = $(this);
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize()
            }).done(function() {
                if (typeof success === 'function') {
                    success.apply(this, arguments);
                }
            }).fail(function() {
                if (typeof error === 'function') {
                    error.apply(this, arguments);
                }
            });
            event.preventDefault();
        };
    };
    $.fn.extend({
        // Usage:
        // jQuery(selector).ajaxForm({ 
        //                              onsubmit:function() {},
        //                              success:function() {}, 
        //                              error: function() {} 
        //                           });
        ajaxForm : function(options) {
            options = $.extend({}, defaults, options);
            return $(this).each(function() {
                $(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error']));
            });
        }
    });
})({}, jQuery);

    이 플러그인은 나를 매우 쉽게 페이지의 "ajaxify"HTML 양식 및 양식 제출을의 상태를 사용자에게 피드백을 구현하기위한 onsubmit, 성공 및 오류 이벤트 핸들러를 제공 할 수 있습니다. 다음과 같이 허용되는 플러그인은 사용되는 :

     $('form').ajaxForm({
      onsubmit: function(event) {
          // User submitted the form
      },
      success: function(data, textStatus, jqXHR) {
          // The form was successfully submitted
      },
      error: function(jqXHR, textStatus, errorThrown) {
          // The submit action failed
      }
 });

    성공 및 오류 이벤트 핸들러 당신이 jQuery를 아약스 방법의 해당 이벤트에서받을 것 같은 인수가 나타납니다.

  9. 9.나는 나를 위해 다음있어 :

    나는 나를 위해 다음있어 :

    formSubmit('#login-form', '/api/user/login', '/members/');

    어디

    function formSubmit(form, url, target) {
    $(form).submit(function(event) {
        $.post(url, $(form).serialize())
            .done(function(res) {
                if (res.success) {
                    window.location = target;
                }
                else {
                    alert(res.error);
                }
            })
            .fail(function(res) {
                alert("Server Error: " + res.status + " " + res.statusText);

            })
        event.preventDefault();
    });
}

    {: 허위, 오류 : '디스플레이 내 오류'성공}이 'URL'반환의 형태로 아약스의 게시물을 가정

    당신이 원하는대로 당신은이 다를 수 있습니다. 그 조각을 사용하시기 바랍니다.

  10. 10.jQuery를 AJAX는 양식을 제출 아무것도하지만 당신이 버튼을 클릭하면 폼의 ID를 사용하여 양식을 제출

    jQuery를 AJAX는 양식을 제출 아무것도하지만 당신이 버튼을 클릭하면 폼의 ID를 사용하여 양식을 제출

    단계를 따르십시오

    1 단계 - 폼 태그는 ID 필드가 있어야합니다

    <form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>

    를 클릭하려고하는 버튼

    <button>Save</button>

    2 단계 - 제출 이벤트는 양식을 제출하는 데 도움이 jQuery를에 있습니다. 코드 아래에서 우리는 HTML 요소 이름에서 JSON 요청을 준비하고있다.

    $("#submitForm").submit(function(e) {
    e.preventDefault();
    var frm = $("#submitForm");
    var data = {};
    $.each(this, function(i, v){
        var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });
    $.ajax({
        contentType:"application/json; charset=utf-8",
        type:frm.attr("method"),
        url:frm.attr("action"),
        dataType:'json',
        data:JSON.stringify(data),
        success:function(data) {
            alert(data.message);
        }
    });
});

    라이브 데모 아래 링크를 클릭

    어떻게 jQuery를 AJAX를 사용하여 양식을 제출?

  11. 11.나는 이것이 jQuery를 관련 질문 알지만, 지금은 JS ES6의 것들로 일이 훨씬 쉽다. 더 순수 자바 스크립트 응답이 없기 때문에, 나는 페치 () API를 사용하여, 내 의견으로는 훨씬 깨끗이에 대한 간단한 순수 자바 스크립트 솔루션을 추가 할 수 있습니다 생각했다. 구현의 네트워크 요청이 현대적인 방법입니다. 귀하의 경우에는, 이미 폼 요소를 갖고 있기 때문에 우리는 단순히 우리의 요청을 구축하는 데 사용할 수 있습니다.

    나는 이것이 jQuery를 관련 질문 알지만, 지금은 JS ES6의 것들로 일이 훨씬 쉽다. 더 순수 자바 스크립트 응답이 없기 때문에, 나는 페치 () API를 사용하여, 내 의견으로는 훨씬 깨끗이에 대한 간단한 순수 자바 스크립트 솔루션을 추가 할 수 있습니다 생각했다. 구현의 네트워크 요청이 현대적인 방법입니다. 귀하의 경우에는, 이미 폼 요소를 갖고 있기 때문에 우리는 단순히 우리의 요청을 구축하는 데 사용할 수 있습니다.

    const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input"); 
let formData = new FormData(); 
for (let input of formInputs) {
    formData.append(input.name, input.value); 
}

fetch(form.action,
    {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));

  12. 12.가장 가까운 사용을 고려

    가장 가까운 사용을 고려

    $('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
        frm = $(ev.target).closest('form');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert(data);
            }
        })
        ev.preventDefault();
    });

  13. 13.여러 formdata을 피하려면 전송 :

    여러 formdata을 피하려면 전송 :

    양식을 다시 제출하기 전에 이벤트를 제출 바인딩을 해제하는 것을 잊지 마세요, 한 번보다 더 많은 기능을 제출 호출 할 수 있습니다 사용자는 어쩌면 그는 무언가를 잊고, 또는 유효성 검사 오류였다.

     $("#idForm").unbind().submit( function(e) {
  ....

  14. 14.당신이 form.serialize를 사용하는 경우 () -이 같은 각 폼 요소에 이름을 지정해야합니다

    당신이 form.serialize를 사용하는 경우 () -이 같은 각 폼 요소에 이름을 지정해야합니다

    <input id="firstName" name="firstName" ...

    그리고 그 형태는 다음과 같이 직렬화됩니다 :

    firstName=Chris&lastName=Halcrow ...

  15. 15.당신은이에 아래와 같은 기능을 제출 사용할 수 있습니다.

    당신은이에 아래와 같은 기능을 제출 사용할 수 있습니다.

    HTML 양식

    <form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

    jQuery를 기능 :

    <script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

    자세한 내용과 예제를 방문하십시오 http://www.spiderscode.com/simple-ajax-contact-form/

  16. 16.시험

    시험

    fetch(form.action,{method:'post', body: new FormData(form)});

    송신 기능 (즉, 형상) { 페치 (form.action {있어서 '포스트'신체 : 신규 FormData (형태)}); 을 console.log ( '우리는 양식을 제출 비동기 (AJAX)'); e.preventDefault (); }

    후 / '제출'전에 크롬 콘솔> 네트워크 봐

  17. 17.이는 영업 이익의 질문에 대한 대답하지 않습니다 하지만 당신은 정적 인 형태의 DOM을 사용할 수없는 경우 경우에, 당신은 또한이 같은 시도 할 수 있습니다.

    이는 영업 이익의 질문에 대한 대답하지 않습니다 하지만 당신은 정적 인 형태의 DOM을 사용할 수없는 경우 경우에, 당신은 또한이 같은 시도 할 수 있습니다.

    var $form = $('<form/>').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});

  18. 18.나는 아무도 데이터를 객체로 언급 없음을 놀라게 찾을 수 있습니다. 나에게는 패스 데이터에 깨끗한 쉬운 방법입니다 :

    나는 아무도 데이터를 객체로 언급 없음을 놀라게 찾을 수 있습니다. 나에게는 패스 데이터에 깨끗한 쉬운 방법입니다 :

    $('form#foo').submit(function () {
    $.ajax({
        url: 'http://foo.bar/some-ajax-script',
        type: 'POST',
        dataType: 'json',
        data: {
            'foo': 'some-foo-value',
            'bar': $('#bar').val()
        }
    }).always(function (response) {
        console.log(response);
    });

    return false;
});

    그런 다음, 백엔드에서 :

    // Example in PHP
$_POST['foo'] // some-foo-value
$_POST['bar'] // value in #bar

  19. 19.자바 스크립트

    자바 스크립트

    (function ($) {
    var form= $('#add-form'),
      input = $('#exampleFormControlTextarea1');


   form.submit(function(event) {

       event.preventDefault(); 

       var req = $.ajax({
           url: form.attr('action'),
           type: 'POST',
           data: form.serialize()
       });
    req.done(function(data) {
       if (data === 'success') {
           var li = $('<li class="list-group-item">'+ input.val() +'</li>');
            li.hide()
                .appendTo('.list-group')
                .fadeIn();
            $('input[type="text"],textarea').val('');
        }
   });
});


}(jQuery));

    HTML

        <ul class="list-group col-sm-6 float-left">
            <?php
            foreach ($data as $item) {
                echo '<li class="list-group-item">'.$item.'</li>';
            }
            ?>
        </ul>

        <form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
            <p class="form-group">
                <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
            </p>
            <button type="submit" class="btn btn-danger">Add new item</button>
        </form>

  20. 20.같은 트리거 될 수 제출 이벤트,이 $ ( "#이 form_id"). 제출 ()도 있습니다. 양식이 아니라 이미 HTML로 표시되어있는 경우에는이 방법을 사용하십시오. 당신은 그냥 페이지에 읽을 물건 양식 입력을 채우는 것, 다음 .submit ()를 호출한다. 당신이 당신의 자바 스크립트에 복사 할 필요가 없습니다 그것은 형태의 선언에 정의 된 방법과 행동을 사용합니다.

    같은 트리거 될 수 제출 이벤트,이 $ ( "#이 form_id"). 제출 ()도 있습니다. 양식이 아니라 이미 HTML로 표시되어있는 경우에는이 방법을 사용하십시오. 당신은 그냥 페이지에 읽을 물건 양식 입력을 채우는 것, 다음 .submit ()를 호출한다. 당신이 당신의 자바 스크립트에 복사 할 필요가 없습니다 그것은 형태의 선언에 정의 된 방법과 행동을 사용합니다.

    예

    21. from https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 페이지가로드 사이의 변수를 지속  (0) 2020.09.21
[JQUERY] 이름으로 변수를 사용하여 자바 스크립트 객체에 속성을 추가 하시겠습니까?  (0) 2020.09.21
[JQUERY] JQuery와 아약스 호출 후 리디렉션 요청을 관리하는 방법  (0) 2020.09.21
[JQUERY] 설정 jQuery로 체크 박스에 대해 "확인"  (0) 2020.09.21
[JQUERY] jQuery를 AJAX 상호 도메인  (0) 2020.09.21
,

티스토리툴바