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

파일을 보내지 않고 단추를 지원하지 않습니다 (예 : 제출 단추 포함).

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

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
}

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

$(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 플러그인의 솔루션입니다 . 매우 유용한 답변을 제공하는 초 광도 덕분 입니다. 필자의 경우 플러그인이 초기화 될 때 옵션 을 사용하여 성공 및 오류 이벤트 핸들러 를 정의 할 수있는 플러그인을 원했습니다 .

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

;(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 , success 및 error 이벤트 핸들러를 제공 할 수 있습니다. 이를 통해 플러그인을 다음과 같이 사용할 수있었습니다.

 $('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'에 대한 게시물이 다음 형식으로 아약스를 반환한다고 가정합니다. {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();
    });

나는 이것이 jQuery관련 질문 이라는 것을 알고 있지만 지금은 JS ES6을 사용하는 것이 훨씬 쉽습니다. 순수한 javascript대답 이 없기 때문에 API javascript를 사용하여 간단한 해결책을 추가 할 수 있다고 생각했습니다 fetch(). 이것은 네트워크 요청을 구현하는 현대적인 방법입니다. 귀하의 경우 이미 양식 요소가 있으므로 간단히 양식 요소를 사용하여 요청을 작성할 수 있습니다.

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

여러 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/

이것은 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);
        }
    }
});

시험

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

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

  console.log('We submit form asynchronously (AJAX)');
  e.preventDefault();
}

<form method="POST" action="myapi/send" onsubmit="send(event,this)" name="orderproductForm">
    <input hidden name="csrfToken" value="$0meh@$h">
    <input name="email" value="aa@bb.com">
    <input name="phone" value="123-456-666">
    <input type="submit">    
</form>

Look on Chrome Console > Network after/before 'submit'

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

자바 스크립트

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

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

예