javascript：如何在没有 jquery 或其他库的情况下将表单数据序列化为字符串答案

【问题标题】：javascript: how to serialize form data to string without jquery or other librariesjavascript：如何在没有 jquery 或其他库的情况下将表单数据序列化为字符串
【发布时间】：2011-05-04 07:52:21
【问题描述】：

如何在没有 jquery 或其他库的情况下以 ajax 方式发布表单数据。

我想定义一个ajaxForm函数，可以序列化表单数据和AJAX post，然后通过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);
  });
}

【问题讨论】：

序列化表单数据就是抓取表单，正确循环其.elements 并从中提取所有数据。您必须处理确定哪些控件是成功的（例如，单选按钮只有在它们没有被禁用并被选中时才成功）并从中获取值（对于不同类型的元素，这样做的方式不同（多个选择元素对于示例）。这是一种冗长而无聊的任务，其中包含大量变量，而使用现有库完成的工作要好得多，而其他人已经为您考虑了所有这些。
我决定将 jquery ajax 表单插件迁移到纯 javascript。
form serialize javascript (no framework)的可能重复

标签： javascript ajax serialization

【解决方案1】：

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

【讨论】：

这并没有解决问题的关键部分（根据在此答案前 20 分钟进行的编辑并以大字体显示）......并且它使用全局变量！至少它确实发出了一个 POST 请求。

【解决方案2】：

对于那些使用 npm 和 browserify 的人来说，这符合要求：https://github.com/defunctzombie/form-serialize

【讨论】：

这个问题确实在没有 jQuery 或其他库的情况下提出。