纯Javascript中是否有任何AJAX Post实现（可能使用xmlhttprequest）？
例如，如果我有这样的表格：
<form action="request.php" id="register_form">
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="LastName">
<input type="submit" value="submit_now">
</form>
这是我在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代码？
答案 0 :(得分：27)
是的，当然可以：）
<form action="request.php" id="register_form">
<input class='formVal' type="text" name="first_name" placeholder="First Name">
<input class='formVal' type="text" name="last_name" placeholder="LastName">
<input type="submit" value="submit_now" onclick="myFunction(); return false;">
</form>
<强> JS
function myFunction()
{
var elements = document.getElementsByClassName("formVal");
var formData = new FormData();
for(var i=0; i<elements.length; i++)
{
formData.append(elements[i].name, elements[i].value);
}
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
alert(xmlHttp.responseText);
}
}
xmlHttp.open("post", "server.php");
xmlHttp.send(formData);
}
<强> server.php
<?php
$firstName = $_POST["first_name"];
$lastName = $_POST["last_name"];
echo $firstName." ".$lastName;
//enter name and lastname into your form and onclick they will be alerted
?>
<强>说明： 函数通过类名获取表单元素并将它们存储在数组中。然后我们创建FormData对象并遍历每个元素的elements数组，并将它们的名称和值附加到FormData对象。 之后我们创建XMLHttpRequest（）对象，在对请求期间监视状态和状态更改，并使用 post 方法将数据发送到server.php 当它结束并且readystate等于4且status等于200时，我们警告来自server.php的响应，我们保存在XMLHttpRequest对象的responseText属性中。
答案 1 :(得分：1)
当然，您可以使用Ajax only Reqwest lib。
类似的东西：
reqwest({
url: 'path/to/json'
, type: 'json'
, method: 'post'
, error: function (err) { }
, success: function (resp) {
qwery('#content').html(resp.content)
}
})
根据他们的自述文件，您可以使用：
$(form).serialize()
答案 2 :(得分：-3)
是的，是的。
正如你所说，它适用于XMLHttpRequest。
var http = new XMLHttpRequest();
var postData = serialize(arr);
var params = "postdata=" + postData;
http.open("POST", url, true);
http.send(params);
对于序列化函数，JS见this page。
function serialize(mixed_value) {
// discuss at: http://phpjs.org/functions/serialize/
// original by: Arpad Ray (mailto:arpad@php.net)
// 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;
}