这篇文章主要讲解了“AJAX提交表单数据实例介绍”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“AJAX提交表单数据实例介绍”吧！
本文实例讲述了AJAX提交表单数据的方法。分享给大家供大家参考。具体如下：
var TINY={};
TINY.ajax = function() {
return {
call : function(type, url, data, callback) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP');// for ie
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
callback.call(this, xhr.responseText);
}
}
switch (type.toUpperCase()) {
case 'POST':
xhr.open('POST', url, true);
// 这句比较重要
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
var formData = '';
for ( var i in data) {
formData += i + '=' + data[i] + '&';
}
xhr.send(formData);
break;
default:
xhr.open('GET', url, true);
xhr.send(null)
break;
}
}
}
}();遍历表单各元素，将参数值组织成JSON格式
这里对CheckBox复选框做了特殊处理，后台接收到的该值为所有复选框值用逗号的拼接
function serialForm(form){
var e = form.elements;
var ht = new Array();
var checkbox = new Array();
for(var i = 0; i < e.length; i++) {
if(e[i].type=="checkbox"){
if(e[i].checked){
if(checkbox[e[i].name] != null) checkbox[e[i].name].push(e[i].value);
else checkbox[e[i].name] = [e[i].value];
}
} else {
ht.push(e[i].name+":'"+e[i].value+"'");
ht.push(",");
}
}
for (var ddd in checkbox ){
ht.push(ddd + ":'" + checkbox[ddd] + "'");
ht.push(",");
}
ht.push("nt:0");
return eval('({' + ht.join("") + '})');
};AJAX的调用：
TINY.ajax.call('post', 'listfrom.do', serialForm(frm), function(data){
var ret = eval('('+data+')');
if(ret.errid==0){
alert(ret.text);
window.location.reload();
}
else{
alert(ret.text);
}
});谈到服务器端返回的JSON格式数据，支持如下格式
String str = "[{\"mailAddr\":\"edison@163.com\"}, {\"mailAddr\":\"jay@263.com\"}]";
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(str);前端调用
function show(){
$.post("listmail.do", {"name" : "John"}, function(data){
for(var i = 0; i < data.length; i++){
alert(data[i].mailAddr);
}
}, "json");
}感谢各位的阅读，以上就是“AJAX提交表单数据实例介绍”的内容了，经过本文的学习后，相信大家对AJAX提交表单数据实例介绍这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
