本文實例講述了AJAX提交表單數(shù)據的方法。分享給大家供大家參考。具體如下：
var TINY={};
TINY.ajax = function() {
return {
/**
* @param string type 請求類型,post,get（目前只實現(xiàn)了這兩種）
* @param strng url 請求的地址
* @param object data 當使用post請求時的請求參數(shù)，ex: data=> {name:'adam'}
* @param function callback 成功返回時的回調函數(shù)
*/
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;
}
}
}
}();
遍歷表單各元素，將參數(shù)值組織成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格式數(shù)據，支持如下格式
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重復請求的方法(GET和POST)
- AJAX避免用戶重復提交請求實現(xiàn)方案
- ajax 防止用戶反復提交的2種解決方案
- 防止重復發(fā)送Ajax請求的解決方案
- PHP中如何防止外部惡意提交調用ajax接口
