이름 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())답변
이것은 간단한 참조입니다.
// 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)
{
}
});
});