Javascript 如何缩短通过xmlhttp发送的post表单？

到目前为止，我有这个表格提交upvote时，点击下面的评论。我已尽可能使用伪代码，以避免出现过于本地化的问题：

<form id="upvote" method=post action="/comment_upvote">

    <input type="hidden" name="cid" value=%cid></input>
    <input type="hidden" name="bpid" value=%bpid></input>
    ...
    <input type="submit" value="">

</form>

我觉得这不是最好的方式，尤其是谈论使用一个完整的POST表单来处理投票

---

我的问题是：发布此upvote表单的更好、更可读的方式是什么？

Jquery很可能就是您正在寻找的框架。 它处理http请求以及DOM操作和许多其他东西。过来看：

您想用jQuery做的事情可以简单地如下所示：

jQuery.post("http://localhost/comment_upvote" ,{cid:%cid,bpid:%bpid} );

假设服务器在JavaScript代码中正确打印%cid和%bpid

---

别忘了在html中添加jquery库：）

如果你真的不想使用框架（这并不丢脸），这里有一些东西可以开始（并且不需要对一些数据使用post方法）

//可恢复交叉浏览器XMLHttpRequest（维基百科）
if（XMLHttpRequest的类型==“未定义”）{
XMLHttpRequest=函数（）{
请尝试{返回新的ActiveXObject（“Msxml2.XMLHTTP.6.0”）；}
捕获（e）{}
请尝试{返回新的ActiveXObject（“Msxml2.XMLHTTP.3.0”）；}
捕获（e）{}
请尝试{返回新的ActiveXObject（“Microsoft.XMLHTTP”）；}
捕获（e）{}
抛出新错误（“此浏览器不支持XMLHttpRequest。”）；
};
}
//可恢复的交叉浏览器事件侦听器管理器（stackoverflow）
函数addListener（elt、类型、侦听器、useCapture）{
if（window.addEventListener）{
elt.addEventListener（类型、侦听器、使用捕获）；
}else if（窗口附件）{
elt.attachEvent（'on'+类型，侦听器）；
}
}
//可恢复序列化为查询字符串函数（w3school和我自己）
函数序列化（附加参数）{
var str=附加参数| |[]；
对于（var i=0；i来说，就像您现在做的一样，这很好。但是Javascript是错误的，因为您没有将POST变量传递给
xmlhttp.send（）

应该是

var upvote = document.getElementById("upvote");
var data_f = new FormData(upvote); // copy html form content to data_f var

        upvote.onclick = function(event) {
            event.preventDefault();
            xmlhttp=new XMLHttpRequest();
            xmlhttp.open("POST", "http://localhost/comment_upvote", true)
            xmlhttp.send(data_f) // send form with variables
        }

很抱歉，我需要本机Javascript用于此用例，但请使用+1，因为这一个对于其他人来说已经足够了：-）为什么呢？我认为没有更好的方法：）jQuery变得“更好”是非常主观的，但它没有什么不是本机Javascript。
// Resuable crossbrowser XMLHttpRequest (Wikipedia)
if (typeof XMLHttpRequest === "undefined") {
  XMLHttpRequest = function () {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
    catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
    catch (e) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP"); }
    catch (e) {}
    throw new Error("This browser does not support XMLHttpRequest.");
  };
}

// Resuable crossbrowser event listener manager (stackoverflow)
function addListener(elt, type, listener, useCapture) {
    if (window.addEventListener) {
        elt.addEventListener(type, listener, useCapture);
    } else if (window.attachEvent) {
        elt.attachEvent('on' + type, listener);
    }
}

// Resuable serialize-as-query-string function (w3school and myself)
function serialize(additionalParams) {
  var str = additionalParams || [];
  for (var i=0; i<this.length; i++) {
      var elt = this.elements[i],
          add = true;
      if ((elt.type == 'checkbox' || elt.type == 'radio') && !elt.checked) {
          add = false;
      }
      add && str.push(encodeURIComponent(elt.name) + "=" + encodeURIComponent(elt.value));
  }
  return str.join("&");
}

// Reusable submit handler
function sendXhr(e) {
    var form = e.target || e.srcElement;
    e = e || window.event;
    e.preventDefault();
    var serializedForm = serialize.call(form, additionalParams);
    debug.innerHTML = serializedForm;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        var done = this.done || 4;
        if (this.readyState === done){
            alert('XHR done, and got response!');
        }
    };
    request.open('GET', form.action + '?' + serializedForm, true);
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    request.send(null);
}

// Code for this page    
var form = document.getElementById('upvote');

var additionalParams = ['foo=bar', 'sam=OK']; // Completely optional

addListener(form, 'submit', sendXhr);

var upvote = document.getElementById("upvote");

        upvote.onclick = function(event) {
            event.preventDefault();
            xmlhttp=new XMLHttpRequest();
            xmlhttp.open("POST", "http://localhost/comment_upvote", true)
            xmlhttp.send()
        }

var upvote = document.getElementById("upvote");
var data_f = new FormData(upvote); // copy html form content to data_f var

        upvote.onclick = function(event) {
            event.preventDefault();
            xmlhttp=new XMLHttpRequest();
            xmlhttp.open("POST", "http://localhost/comment_upvote", true)
            xmlhttp.send(data_f) // send form with variables
        }