ajax+prototype的无刷新表单提交

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相关知识系统的整理一下，包括各种流行框架的帮助，请关注本站。

本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u1/56253/showart_457768.html