JavaScript: как сериализовать данные формы в строку без JQuery или других библиотек

Question

как публиковать данные формы в формате ajax и без jquery или других библиотек.

Я хочу определить функцию ajaxForm, которая может сериализовать данные формы и запись AJAX, а затем выполнить обратный вызов через javascript.

Если у меня есть форма ниже:

<form action="url" method="POST">
<table>
<tr><td>label...</td><td><input name="input1" type="text"/></td></tr>
<tr><td>label...</td><td><input name="input2" type="checkbox"/></td></tr>
<tr><td>label...</td><td><select name="input3"><options....></select></td></tr>
</table>
</form>

, и я получил элемент формы с помощью javascript, а затем я передаю элемент формы и функцию обратного вызова в функцию ajaxForm (form, callback).

Кто-нибудь может привести пример?Большое спасибо ....

обновление: моя самая большая проблема заключается в том, как сериализовать данные формы?

обновить еще раз: спасибо за ваш ответ.Проблема решена.

Я переместил плагин формы jquery в чистый javascript.и я рад поделиться с вами, ребята.

https://github.com/guileen/ajaxform.js

button.onclick = function(){
  ajaxForm(form, function(xmlhttp){
    alert(xmlhttp.status);
    alert(xmlhttp.responseText);
  });
}

Answer 1

Для тех, кто использует npm и browserify, это здесь соответствует требованиям: https://github.com/defunctzombie/form-serialize

Answer 2

var http_request = false;
function makePOSTRequest(url, parameters) {
  http_request = false;
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
     http_request = new XMLHttpRequest();
     if (http_request.overrideMimeType) {
        // set type accordingly to anticipated content type
        //http_request.overrideMimeType('text/xml');
        http_request.overrideMimeType('text/html');
     }
  } else if (window.ActiveXObject) { // IE
     try {
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
        try {
           http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
     }
  }
  if (!http_request) {
     alert('Cannot create XMLHTTP instance');
     return false;
  }

  http_request.onreadystatechange = alertContents;
  http_request.open('POST', url, true);
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");
  http_request.send(parameters);
}

function alertContents() {
  if (http_request.readyState == 4) {
     if (http_request.status == 200) {
        //alert(http_request.responseText);
        result = http_request.responseText;
        document.getElementById('myspan').innerHTML = result;            
     } else {
        alert('There was a problem with the request.');
     }
  }
}

// call me
function get(obj) {
  var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) +
                "&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value );
  makePOSTRequest('post.php', poststr);
}