javascript no jQuery를 사용한 간단한 ajax 양식

javascript no jQuery를 사용한 간단한 ajax 양식

저는 제가 바꿀 수 없고 jQuery를 사용할 수 없는 형태로 작업하고 있습니다.현재 양식은 결과를 새 창에 게시합니다.마크업을 변경하지 않고 제출할 때 결과가 표시되도록 아약스 양식으로 변경할 수 있습니까?결과 페이지에서 양식 페이지로 결과(마크업)를 다시 당깁니다.

여기 양식에 대한 마크업이 있습니다.

<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite" target="_blank">
<div class="form-item">
    <fieldset class="form-radio-group">
        <legend><span class="legend-text">What mobile phone is the best?</span></legend>
                <div class="form-radio-item">
                    <input type="radio" class="radio" value="1225962377541" name="option" id="form-item-1225962377541">
                    <label class="radio" for="form-item-1225962377541">
                        <span class="label-text">iPhone</span>
                    </label>
                </div><!-- // .form-radio-item -->
                <div class="form-radio-item">
                    <input type="radio" class="radio" value="1225962377542" name="option" id="form-item-1225962377542">
                    <label class="radio" for="form-item-1225962377542">
                        <span class="label-text">Android</span>
                    </label>
                </div><!-- // .form-radio-item -->
                <div class="form-radio-item">
                    <input type="radio" class="radio" value="1225962377543" name="option" id="form-item-1225962377543">
                    <label class="radio" for="form-item-1225962377543">
                        <span class="label-text">Symbian</span>
                    </label>
                </div><!-- // .form-radio-item -->
                <div class="form-radio-item">
                    <input type="radio" class="radio" value="1225962377544" name="option" id="form-item-1225962377544">
                    <label class="radio" for="form-item-1225962377544">
                        <span class="label-text">Other</span>
                    </label>
                </div><!-- // .form-radio-item -->
    </fieldset>
</div><!-- // .form-item -->
<div class="form-item form-item-submit">
    <button class="button-submit" type="submit"><span>Vote now</span></button>
</div><!-- // .form-item -->
<input type="hidden" name="c" value="News_Poll">
<input type="hidden" class="pollId" name="cid" value="1225962377536">
<input type="hidden" name="pagename" value="Foundation/News_Poll/saveResult">
<input type="hidden" name="site" value="themouth">

어떤 팁이나 튜토리얼이든 감사합니다. :)

다음은 현대 브라우저에 더 적합한 다른 답변의 훨씬 더 우아한 솔루션입니다.

이전 브라우저에 대한 지원이 필요하다면 이미 jQuery와 같은 라이브러리를 사용할 가능성이 높기 때문에 이 질문을 무의미하게 만들 수 있습니다.

/**
 * Takes a form node and sends it over AJAX.
 * @param {HTMLFormElement} form - Form node to send
 * @param {function} callback - Function to handle onload. 
 *                              this variable will be bound correctly.
 */

function ajaxPost (form, callback) {
    var url = form.action,
        xhr = new XMLHttpRequest();

    //This is a bit tricky, [].fn.call(form.elements, ...) allows us to call .fn
    //on the form's elements, even though it's not an array. Effectively
    //Filtering all of the fields on the form
    var params = [].filter.call(form.elements, function(el) {
        //Allow only elements that don't have the 'checked' property
        //Or those who have it, and it's checked for them.
        return typeof(el.checked) === 'undefined' || el.checked;
        //Practically, filter out checkboxes/radios which aren't checekd.
    })
    .filter(function(el) { return !!el.name; }) //Nameless elements die.
    .filter(function(el) { return el.disabled; }) //Disabled elements die.
    .map(function(el) {
        //Map each field into a name=value string, make sure to properly escape!
        return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);
    }).join('&'); //Then join all the strings by &

    xhr.open("POST", url);
    // Changed from application/x-form-urlencoded to application/x-form-urlencoded
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    //.bind ensures that this inside of the function is the XHR object.
    xhr.onload = callback.bind(xhr); 

    //All preperations are clear, send the request!
    xhr.send(params);
}

위는 모든 주요 브라우저와 IE9 이상에서 지원됩니다.

다음은 여러분이 하려는 것을 정확히 수행하기 위해 사용하는 멋진 기능입니다.

HTML:

<form action="/cs/Satellite">...</form>
<input type="button" value="Vote now" onclick="javascript:AJAXPost(this)">

JS:

function AJAXPost(myself) {
    var elem   = myself.form.elements;
    var url    = myself.form.action;    
    var params = "";
    var value;

    for (var i = 0; i < elem.length; i++) {
        if (elem[i].tagName == "SELECT") {
            value = elem[i].options[elem[i].selectedIndex].value;
        } else {
            value = elem[i].value;                
        }
        params += elem[i].name + "=" + encodeURIComponent(value) + "&";
    }

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else { 
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("POST",url,false);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);

    return xmlhttp.responseText;
}

요즘 사용하는 방법FormData가장 쉬운 방법입니다.다음을 참조하여 구성합니다.Form요소, 그리고 그것은 당신을 위해 모든 것을 직렬화합니다.

MDN에는 다음과 같은 예가 있습니다. 대략 다음과 같습니다.

const form = document.querySelector("#debarcode-form");
form.addEventListener("submit", e => {
    e.preventDefault();
    const fd = new FormData(form);
    const xhr = new XMLHttpRequest();
    xhr.addEventListener("load", e => {
        console.log(e.target.responseText);
    });
    xhr.addEventListener("error", e => {
        console.log(e);
    });
    xhr.open("POST", form.action);
    xhr.send(fd);
});

개체(JSON)로 원하는 경우:

const obj = {};
[...fd.entries()].forEach(entry => obj[entry[0]] = entry[1]);

Madara의 답변에 대한 확장:Chrome 47.0.2526.80에서 작동하기 위해 몇 가지 변경을 해야 했습니다(다른 항목에서는 테스트되지 않았습니다).이것이 누군가의 시간을 절약할 수 있기를 바랍니다.

이 스니펫은 다음과 같이 변경된 답변을 수정한 것입니다.

• 여과기!el.disabled,
• 제외하기 전에 입력 유형 확인!checked
• 요청 유형:x-www-form-urlencoded

다음 결과와 함께:

function ajaxSubmit(form, callback) {
    var xhr = new XMLHttpRequest();
    var params = [].filter.call(form.elements, function (el) {return !(el.type in ['checkbox', 'radio']) || el.checked;})
    .filter(function(el) { return !!el.name; }) //Nameless elements die.
    .filter(function(el) { return !el.disabled; }) //Disabled elements die.
    .map(function(el) {
        return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);
    }).join('&'); //Then join all the strings by &
    xhr.open("POST", form.action);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onload = callback.bind(xhr);
    xhr.send(params);
};

전략은 양식을 직렬화하고 XHR을 사용하여 데이터를 전송한 다음 응답으로 원하는 작업을 수행하는 것입니다.Matt Krus의 Ajax Toolbox 및 관련 Javascript Toolbox에는 좋은 유틸리티와 도움말이 있습니다.

만약 당신이 단지 게시된 양식을 연재하고 있다면, 다음과 같은 방법이 있을 것입니다.다른 양식 제어 유형을 포함하도록 쉽게 확장할 수 있습니다.

var serialiseForm = (function() {

  // Checkboxes that have already been dealt with
  var cbNames;

  // Return the value of a checkbox group if any are checked
  // Otherwise return empty string
  function getCheckboxValue(cb) {
    var buttons = cb.form[cb.name];
    if (buttons.length) {
      for (var i=0, iLen=buttons.length; i<iLen; i++) {
        if (buttons[i].checked) {
          return buttons[i].value;
        }
      }
    } else {
      if (buttons.checked) {
        return buttons.value;
      }
    }
    return '';
  }

  return function (form) {
    var element, elements = form.elements;
    var result = [];
    var type;
    var value = '';
    cbNames = {};

    for (var i=0, iLen=elements.length; i<iLen; i++) {
      element = elements[i];
      type = element.type;

      // Only named, enabled controls are successful
      // Only get radio buttons once
      if (element.name && !element.disabled && !(element.name in cbNames)) {

         if (type == 'text' || type == 'hidden') {
          value = element.value;

        } else if (type == 'radio') {
          cbNames[element.name] = element.name;
          value = getCheckboxValue(element);

        }
      }

      if (value) {
        result.push(element.name + '=' + encodeURIComponent(value));
      }
      value = '';

    }
    return '?' + result.join('&');
  }
}());

현대적인 사용 방법은 다음과 같습니다.

const formData = new FormData(form);
fetch(form.action, {
  method: 'POST',
  body: formData
});

브라우저 지원을 기록하고 IE 지원이 필요한 경우 이 폴리파일을 사용합니다.

function ajaxSubmit(form, callback) {
var xhr = new XMLHttpRequest();
var params = [].filter.call(form.elements, function (el) {return !(el.type in ['checkbox', 'radio']) || el.checked;})
.filter(function(el) { return !!el.name; }) //Nameless elements die.
.filter(function(el) { return !el.disabled; }) //Disabled elements die.
.map(function(el) {
    if (el.type=='checkbox') return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.checked);
   else return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);
}).join('&'); //Then join all the strings by &
xhr.open("POST", form.action);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = callback.bind(xhr);
xhr.send(params);

};

저는 방금 위의 쿠미의 답변을 받아 라디오/체크박스에 적용했습니다.이것이 얼마나 간단하고 명확한지 믿을 수 없습니다.몇 가지 예외를 제외하고, 저는 프레임워크 사용을 끝냈습니다.

    var params = "";
    var form_elements = form.elements;
    for (var i = 0; i < form_elements.length; i++) 
    {
        switch(form_elements[i].type)
        {
            case "select-one":
            {
                value = form_elements[i].options[form_elements[i].selectedIndex].value;
            }break;
            case "checkbox":
            case "radio": 
            {
                if (!form_elements[i].checked)
                {
                    continue; // we don't want unchecked data
                }
                value = form_elements[i].value;
            }break;
            case "text" :
            {
                value = form_elements[i].value;                
            }break;

        }

        params += encodeURIComponent(form_elements[i].name) + "=" + encodeURIComponent(value) + "&";
    }



    var xhr = new XMLHttpRequest();    
    xhr.open('POST', "/api/some_url");
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200)
            {

                console.log("xhr.responseText");
            }
            else
            {
                console.log("Error! Status: ", xhr.status, "Text:", xhr.responseText);
            } 
        }
    };

    console.log(params);
    xhr.send(params);

여기 제가 생각해낸 가장 간단한 방법이 있습니다.저는 이 정확한 접근법을 사용하는 예를 찾지 못했습니다.코드는 제출하지 않는 유형 단추를 사용하여 양식을 제출하고 결과를 div에 배치합니다. 양식이 올바르지 않은 경우(모든 필수 필드가 채워진 것은 아님) 제출 작업을 무시하고 브라우저 자체에서 올바르게 작성되지 않은 필드를 표시합니다.

이 코드는 "FormData" 개체를 지원하는 최신 브라우저에서만 작동합니다.

<script>
function ajaxSubmitForm() {
  const form = document.getElementById( "MyForm" );
  if (form.reportValidity()) {
    const FD = new FormData( form );
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("content_area").innerHTML = this.responseText; } };
    xhttp.open("POST","https://example.com/whatever.php",true);
    xhttp.send( FD );
  }
}
</script>

<div id="content_area">
<form id="MyForm">
  <input type="hidden" name="Token" Value="abcdefg">
  <input type="text" name="UserName" Value="John Smith" required>
  <input type="file" accept="image/jpeg" id="image_uploads" name="ImageUpload" required>
  <button type="button" onclick="ajaxSubmitForm()">
</form>
</div>

언급URL : https://stackoverflow.com/questions/6990729/simple-ajax-form-using-javascript-no-jquery