ajax+prototype的无刷新表单提交
时间:2008-01-04 来源:3.1F
这几天用php写短信模块,这个例子不错,先收载!
简单研究了一下protetype.js,写了个登录的例子,在线注册的例子大同小异,主要是服务器端的代码不同。
在线网址:
http://www.51ajax.com/demo/register/index.html
共两个文件,具体代码如下:
1.index.html
复制内容到剪贴板
代码:
利用protetype提交表单
body{font-size:13px;}
#msginfo{color:red;text-align:left;font-size:14px;}
.txt{width:120px;border:1px solid #000;}
function chkfrom(obj){
$("msginfo").innerHTML=""
var opt = {
method: 'get',
onSuccess: function(t) {
$("msginfo").innerHTML=t.responseText
},
on404: function(t) {
$("msginfo").innerHTML='错误:找不到提交页!';
},
onFailure: function(t) {
$("msginfo").innerHTML='错误:' + t.status + ' -- ' + t.statusText;
},
asynchronous:true
}
var ajax=new Ajax.Request('process.php?'+getRequestBody(obj), opt);
}
function getRequestBody(oForm) {
var aParams = new Array();
for (var i=0 ; i
Login
User Name:
Password:
2.process.php
[php]
[/php]
关于protetype.js中的Ajax.Request与Ajax.Updater的区别,个人理解Ajax.Request适用于对返回数据要进行比较复杂的处理的情况;Ajax.Update则适用于用返回的数据更新当前页中的某个Html元素的内容。
Ajax.Request的使用方法如下:
复制内容到剪贴板
代码:
var opt = {
// Use POST
method: 'post',
// Send this lovely data
postBody: 'thisvar=true&thatvar=Howdy&theothervar=2112',
// Handle successful response
onSuccess: function(t) {
alert(t.responseText);
},
// Handle 404
on404: function(t) {
alert('Error 404: location "' + t.statusText + '" was not found.');
},
// Handle other errors
onFailure: function(t) {
alert('Error ' + t.status + ' -- ' + t.statusText);
}
}
new Ajax.Request('/foo/bar', opt);
Ajax.Update的使用方法见下例:
复制内容到剪贴板
代码:
var ajax;
function mydate() {
ajax = new Ajax.Updater(
'datestr', // DIV id must be declared before the method was called
'date.cgi', // URL
{ // options
method:'get'
});
}
date is now: n/a
mydate();
我也是精略研究了一下,希望能对你有所帮助,近期准备推出AJAX WIKI,会将AJAX相关知识系统的整理一下,包括各种流行框架的帮助,请关注本站。
相关阅读 更多 +