jQuery AJAX 제출 양식

jQuery AJAX 제출 양식

---

이름 orderproductForm과 정의되지 않은 입력 수가 있는 양식 이 있습니다.

나는 어떤 종류의 jQuery.get 또는 ajax 또는 Ajax를 통해 페이지를 호출하고 양식의 모든 입력을 함께 보내는 것과 같은 것을하고 싶습니다 orderproductForm.

한 가지 방법은 다음과 같은 작업을 수행하는 것입니다.

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

그러나 모든 양식 입력을 정확히 알지 못합니다. 모든 양식 입력을 보내는 기능, 기능 또는 무언가가 있습니까?

---

Ajax Form Plugin 또는 jQuery serialize 함수 에서 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 직렬화 문서는 여기에 있습니다 .

---

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

// 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.
           }
         });


});

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

---

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

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

---

명심해야 할 몇 가지 사항이 있습니다.

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

• 제출 버튼 사용
• Enter를 눌러
• JavaScript에서 제출 이벤트를 트리거하여
• 장치 또는 향후 장치에 따라 더 많을 수 있습니다.

따라서 버튼 클릭 이벤트가 아닌 양식 제출 이벤트에 바인딩해야합니다 . 이렇게하면 현재와 미래의 모든 장치 및 보조 기술에서 코드가 작동합니다.

2. 히 약스

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

양식에서 URL과 메서드를 가져와야하므로 HTML이 변경 되어도 JavaScript를 업데이트 할 필요가 없습니다.

3. 눈에 잘 띄지 않는 JavaScript

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

속도

스크립트를 인라인으로 삽입하는 대신 외부 스크립트를 사용하는 것이 이상적입니다. 스크립트 태그를 사용하여 페이지의 헤드 섹션에 링크하거나 페이지 하단에 링크하여 속도를 높일 수 있습니다. 스크립트는 방해가되지 않고 조용히 사용자 경험을 향상시켜야합니다.

암호

위의 모든 내용에 동의하고 제출 이벤트를 포착하고 AJAX (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...
    });
  });
});

다음과 같은 것을 사용하여 JavaScript를 통해 원할 때마다 양식 제출을 수동으로 트리거 할 수 있습니다.

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

양식 태그에 data-autosubmit 속성을 추가하면 다음을 수행 할 수 있습니다.

HTML

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

JS

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

---

FormData 를 사용할 수도 있습니다 (IE에서는 사용할 수 없음).

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 를 사용하는 방법 입니다.

---

단순 버전 (이미지를 보내지 않음)

<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> = 1.3.2에서 작동합니다.
• 문서가 준비되기 전에 실행할 수 있습니다.
• 양식을 제거하고 다시 추가 할 수 있으며 여전히 작동합니다.
• 양식의 "action"속성에 지정된 일반 양식과 동일한 위치에 게시됩니다.

자바 스크립트

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의 답변을 편집하고 싶었지만 너무 많이 벗어 났으므로 별도의 답변으로 게시하기로 결정했습니다.

파일을 보내지 않고 버튼을 지원하지 않습니다. 예를 들어 버튼 (제출 버튼 포함)을 클릭하면 해당 값이 양식 데이터로 전송되지만 이는 ajax 요청이기 때문에 버튼 클릭이 전송되지 않습니다.

버튼을 지원하기 위해 제출 대신 실제 버튼 클릭을 캡처 할 수 있습니다.

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 가 PHP에 대해 설정하는이 헤더 로 ajax 요청 을 감지 할 수 있습니다.HTTP_X_REQUESTED_WITH

PHP

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

---

이 코드는 파일 입력에서도 작동합니다.

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


        }
    });        
});

---

나는 superluminary 의이 답변 을 정말 좋아했으며 특히 그가 포장 한 방식은 jQuery 플러그인의 솔루션입니다 . 그래서 매우 유용한 답변을 주신 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);

이 플러그인을 사용하면 페이지에서 html 양식을 매우 쉽게 "ajaxify" 하고 양식 제출 상태에 대한 피드백을 구현 하기위한 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 아약스 방법.

---

나는 나를 위해 다음을 얻었다.

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'에 대한 게시물이 다음과 같은 형식의 ajax를 반환한다고 가정합니다. {success: false, error:'my Error to display'}

원하는대로 변경할 수 있습니다. 해당 스 니펫을 자유롭게 사용하십시오.

---

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를 사용하여 양식을 제출하는 방법은 무엇입니까?

---

사용 고려 closest

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

---

여러 formdata 전송을 방지하려면 :

양식이 다시 제출되기 전에 사용자가 sumbit 함수를 두 번 이상 호출 할 수 있습니다. 아마도 뭔가를 잊었거나 유효성 검사 오류 일 수 있습니다.

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

---

양식 .serialize ()를 사용하는 경우 각 양식 요소에 다음과 같은 이름을 지정해야합니다.

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

그리고 양식은 다음과 같이 직렬화됩니다.

firstName=Chris&lastName=Halcrow ...

---

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

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/

---

data객체가 될 수 있는 친근한 알림 :

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

    return false;
});

---

이것은 OP의 질문에 대한 답은 아니지만
정적 양식 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);
        }
    }
});

---

$ ( "# form_id"). submit ()와 같이 트리거 될 수있는 제출 이벤트도 있습니다. 양식이 이미 HTML로 잘 표현 된 경우이 방법을 사용합니다. 페이지를 읽고 양식 입력에 물건을 채운 다음 .submit ()을 호출합니다. 양식의 선언에 정의 된 메서드와 작업을 사용하므로 자바 스크립트에 복사 할 필요가 없습니다.

예

참고 URL : https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form