文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>ajax+prototype的无刷新表单提交

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

相关阅读 更多 +
排行榜 更多 +
祖玛泡泡龙(经典祖玛)下载

祖玛泡泡龙(经典祖玛)下载

休闲益智 下载
网络掠夺者最新版下载

网络掠夺者最新版下载

休闲益智 下载
迷你冲撞小游戏中文版下载

迷你冲撞小游戏中文版下载

休闲益智 下载