javascript - 전송 - jquery submit ajax example




jQuery AJAX 제출 양식 (10)

orderproductForm 이라는 이름의 폼과 정의되지 않은 숫자의 입력이 있습니다.

어떤 종류의 jQuery.get 또는 ajax를 수행하거나 Ajax를 통해 페이지를 호출하고 orderproductForm 양식의 모든 입력을 전송 orderproductForm 합니다.

한 가지 방법으로 뭔가를하는 것이 겠지요.

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

그러나 나는 정확하게 모든 양식 입력을 모른다. 모든 양식 입력을 전송하는 기능, 기능 또는 무언가가 있습니까?


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

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

양식 또는 모든 양식의 페이지에 복사 및 붙여 넣기

답변을 수정 한 버전입니다.

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

파일을 보내지 않고 버튼을 지원하지 않습니다. 예를 들어 버튼을 클릭하면 (제출 버튼 포함) 양식 데이터로 값을 보냅니다. 그러나 이것은 아약스 요청이므로 버튼 클릭이 전송되지 않습니다.

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

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에 대해 HTTP_X_REQUESTED_WITH 를 설정하는이 헤더 로 아약스 요청감지 할 수 있습니다.

PHP

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

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

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

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

firstName=Chris&lastName=Halcrow ...

나는 이 답변 을 가장 좋아했으며, 특히 jQuery 플러그인의 해결책이라고 생각했다. 그래서 매우 유용한 답변에 대한 에게 감사드립니다. 필자의 경우, 플러그인을 초기화 할 때 옵션을 사용하여 성공오류 이벤트 핸들러를 정의 할 수있는 플러그인을 원했습니다.

그래서 여기에 내가 생각해 낸 것이 있습니다 :

;(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 , successerror 이벤트 핸들러를 제공 할 수 있습니다. 이렇게하면 다음과 같이 플러그인을 사용할 수 있습니다.

 $('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 ajax 메소드의 해당 이벤트에서 수신하는 인수와 동일한 인수를 수신한다.


다음은 간단한 참조입니다.

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


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

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

나는 그것이 당신을 돕기를 바랍니다.


아래처럼 submit 기능을 사용할 수 있습니다.

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/


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

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

이 $ ( "# form_id")처럼 트리거 될 수있는 submit 이벤트도 있습니다. 양식이 이미 HTML로 잘 표현되어 있다면이 방법을 사용하십시오. 페이지를 읽고 내용 입력으로 양식 입력을 채운 다음 .submit ()을 호출하십시오. 폼의 선언에 정의 된 메서드와 동작을 사용하므로 자바 스크립트에 복사 할 필요가 없습니다.

examples


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

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


        }
    });        
});

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 를 사용할 수도 있습니다 (그러나 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 를 사용하는 방법입니다.





html-form