纯Javascript中的AJAX Post实现

在纯Javascript中是否有任何AJAX Post的实现（可能使用xmlhttprequest）？

例如，如果我有这样的表格：

这是我在jQuery中实现的AJAX

 $('#register_form').submit(function(e) { var postData = $(this).serializeArray(); var formURL = $(this).attr("action"); /* start ajax submission process */ $.ajax({ url: formURL, type: "POST", data: postData, success: function(data, textStatus, jqXHR) { alert('Success!'); }, error: function(jqXHR, textStatus, errorThrown) { alert('Error occurred!'); } }); e.preventDefault(); //STOP default action /* ends ajax submission process */ }); 

我可以不使用jQuery做同样的事情吗？ 如果可能，我如何将上述jQuery代码实现为纯/纯Javascript代码？

Answer 1

是的，当然这是可能的:)

JS

 function myFunction() { var elements = document.getElementsByClassName("formVal"); var formData = new FormData(); for(var i=0; i 

server.php

Explanation： Function通过类名获取表单元素，并将它们存储在数组中。 然后我们创建FormData对象并遍历每个元素的elements数组，并将它们的名称和值附加到FormData对象。 之后我们创建XMLHttpRequest（）对象，在请求期间监视状态和状态更改，并使用post方法将数据发送到server.php当它结束并且readystate等于4且status等于200时，我们会警告来自server.php的响应，我们保存在XMLHttpRequest对象的responseText属性中。

Answer 2

当然，您只能使用Ajax Reqwest lib。

就像是：

 reqwest({ url: 'path/to/json' , type: 'json' , method: 'post' , error: function (err) { } , success: function (resp) { qwery('#content').html(resp.content) } }) 

根据他们的README，您可以使用：

 $(form).serialize() 

Answer 3

是的。

正如您所说，它适用于XMLHttpRequest 。

 var http = new XMLHttpRequest(); var postData = serialize(arr); var params = "postdata=" + postData; http.open("POST", url, true); http.send(params); 

对于序列化函数，JS请参阅此页面 。

 function serialize(mixed_value) { // discuss at: http://phpjs.org/functions/serialize/ // original by: Arpad Ray (mailto:[e-mail]) // improved by: Dino // improved by: Le Torbi (http://www.letorbi.de/) // improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net/) // bugfixed by: Andrej Pavlovic // bugfixed by: Garagoth // bugfixed by: Russell Walker (http://www.nbill.co.uk/) // bugfixed by: Jamie Beck (http://www.terabit.ca/) // bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net/) // bugfixed by: Ben (http://benblume.co.uk/) // input by: DtTvB (http://dt.in.th/2008-09-16.string-length-in-bytes.html) // input by: Martin (http://www.erlenwiese.de/) // note: We feel the main purpose of this function should be to ease the transport of data between php & js // note: Aiming for PHP-compatibility, we have to translate objects to arrays // example 1: serialize(['Kevin', 'van', 'Zonneveld']); // returns 1: 'a:3:{i:0;s:5:"Kevin";i:1;s:3:"van";i:2;s:9:"Zonneveld";}' // example 2: serialize({firstName: 'Kevin', midName: 'van', surName: 'Zonneveld'}); // returns 2: 'a:3:{s:9:"firstName";s:5:"Kevin";s:7:"midName";s:3:"van";s:7:"surName";s:9:"Zonneveld";}' var val, key, okey, ktype = '', vals = '', count = 0, _utf8Size = function (str) { var size = 0, i = 0, l = str.length, code = ''; for (i = 0; i < l; i++) { code = str.charCodeAt(i); if (code < 0x0080) { size += 1; } else if (code < 0x0800) { size += 2; } else { size += 3; } } return size; }, _getType = function (inp) { var match, key, cons, types, type = typeof inp; if (type === 'object' && !inp) { return 'null'; } if (type === 'object') { if (!inp.constructor) { return 'object'; } cons = inp.constructor.toString(); match = cons.match(/(\w+)\(/); if (match) { cons = match[1].toLowerCase(); } types = ['boolean', 'number', 'string', 'array']; for (key in types) { if (cons == types[key]) { type = types[key]; break; } } } return type; }, type = _getType(mixed_value); switch (type) { case 'function': val = ''; break; case 'boolean': val = 'b:' + (mixed_value ? '1' : '0'); break; case 'number': val = (Math.round(mixed_value) == mixed_value ? 'i' : 'd') + ':' + mixed_value; break; case 'string': val = 's:' + _utf8Size(mixed_value) + ':"' + mixed_value + '"'; break; case 'array': case 'object': val = 'a'; /* if (type === 'object') { var objname = mixed_value.constructor.toString().match(/(\w+)\(\)/); if (objname == undefined) { return; } objname[1] = this.serialize(objname[1]); val = 'O' + objname[1].substring(1, objname[1].length - 1); } */ for (key in mixed_value) { if (mixed_value.hasOwnProperty(key)) { ktype = _getType(mixed_value[key]); if (ktype === 'function') { continue; } okey = (key.match(/^[0-9]+$/) ? parseInt(key, 10) : key); vals += this.serialize(okey) + this.serialize(mixed_value[key]); count++; } } val += ':' + count + ':{' + vals + '}'; break; case 'undefined': // Fall-through default: // if the JS object has a property which contains a null value, the string cannot be unserialized by PHP val = 'N'; break; } if (type !== 'object' && type !== 'array') { val += ';'; } return val; }