|
这篇文章主要介绍了AJAX提交表单数据的方法,实例分析了Ajax调用的原理与实现技巧,需要的朋友可以参考下
本文实例讲述了AJAX提交表单数据的方法。分享给大家供大家参考。具体如下：
var TINY={};
TINY.ajax = function() {
return {
/**
* @param string type 请求类型,post,get（目前只实现了这两种）
* @param strng url 请求的地址
* @param object data 当使用post请求时的请求参数，ex: data=> {name:'adam'}
* @param function callback 成功返回时的回调函数
*/
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程序设计有所帮助。 | 
发表于 2015-5-28 16:04:27
