ajax+prototype的无刷新表单提交

现在的位置: 首页 > 综合 > 正文

RSS

ajax+prototype的无刷新表单提交

2017年12月20日 ⁄ 综合 ⁄ 共 3507字 ⁄ 字号小中大 ⁄ 评论关闭

[说明：此文章非本人写]

这几天用php写短信模块，这个例子不错，先收载！

简单研究了一下protetype.js，写了个登录的例子，在线注册的例子大同小异，主要是服务器端的代码不同。

在线网址：http://www.51ajax.com/demo/register/index.html

共两个文件，具体代码如下：

1.index.html

复制内容到剪贴板

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>利用protetype提交表单</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> body{font-size:13px;} #msginfo{color:red;text-align:left;font-size:14px;} .txt{width:120px;border:1px solid #000;}</style> <mce:script src="/js/prototype.js" mce_src="js/prototype.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="content"> <form action="#" name="form1" id="form1"> <table> <tr> <th colspan="2">Login</th> </tr> <tr> <td width="72">User Name:</td> <td width="168"><input type="text" name="username" id="username" class="txt"> </td> </tr> <tr> <td>Password:</td> <td><input type="password" name="password" id="password" class="txt"> </td> </tr> <tr> <td> </td> <td><input type="button" name="submit" id="submit" value="Save" onclick="javascript:chkfrom(this.form)"></td></tr> </table> </form> </div> <div id="msginfo"></div> </body> </html> 2.process.php [php] <? header("Content-Type:text/html;charset=utf-8"); $username=$_GET["username"]; $password=$_GET["password"]; if($username=="" && $password=="") { echo("用户名与密码不能为空!"); } else{ if($username=="admin" && $password=="admin") { echo("登录成功!"); } else { echo("登录失败!"); } } ?>

关于protetype.js中的Ajax.Request与Ajax.Updater的区别，个人理解Ajax.Request适用于对返回数据要进行比较复杂的处理的情况；Ajax.Update则适用于用返回的数据更新当前页中的某个Html元素的内容。

Ajax.Request的使用方法如下：

复制内容到剪贴板

Ajax.Update的使用方法见下例：

复制内容到剪贴板

代码:

<mce:script src="/scripts/prototype.js" mce_src="scripts/prototype.js" type="text/javascript"></mce:script> <mce:script language="JavaScript" type="text/javascript"></mce:script> date is now: <div id="datestr">n/a</div> <mce:script language="JavaScript" type="text/javascript"></mce:script>

我也是精略研究了一下，希望能对你有所帮助，近期准备推出AJAX WIKI，会将AJAX相关知识系统的整理一下，包括各种流行框架的帮助，请关注本站。

原文地址 http://www.51ajax.com/bbs/viewthread.php?tid=197#

http://blog.chinaunix.net/u1/56253/showart_457768.html