自在飞花轻似梦
当前位置：
& WordPress前台异步ajax登录、注册功能的实现
纯代码实现的，这就不用说了，发现有的网站也有前台自定义登录功能，但是不是ajax的，就是登录页面的代码是事先加载好了，然后通过js控制使它显示隐藏，为了一个小小的功能，完全不必要事先加载这么多代码，所以自己写了一个ajax登录、注册页面，只有点击了登录/注册才会加载登录注册的代码，并在前台暗箱显示出来，达到异步加载的目的，为了异步加载的速度，把登录和注册分开来加载，所以切换这两个功能也是异步的。
说是wordpress的功能，但是理论上适合任何网站的功能，只需要修改一下表单提交网址就行了。效果请看本站右上角的登录、注册。
首先新建两个php文件，把编码格式为设置成你网站的编码格式（如UTF-8），一个命名为login.php，另一个命名为register.php。
把以下代码扔到login.php中并保存上传到主题目录下：
&style&#win{-webkit-animation: bounce 1s .2-moz-animation: bounce 1s .2}#back{z-index:2;POSITION: left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.8);}&/style&
&div id="win" style="display: POSITION: margin: 0top:30%; width:400 height:250max-width:100%; border:1px solid #888; background:rgb(18, 93, 151) url('/lg2.jpg') no- color: rgb(18, 126, 61);text-align:padding: 0box-shadow: rgba(0,0,0,.8) 0 0 8"&
&div style="text-align:margin:8height:20"&&a href="javascript:closeLogin();" style="color: #438856;cursor:height: 20display:float:"&关闭&/a&&/div&
&form name="loginform" id="loginform" action="/wp-login.php" method="post"&
&p&&div for="user_login"&用户名&&&input type="text" name="log" id="user_login" size="20" style="height:20color:#A84343"" value="请输入用户名" onfocus="if (this.value == '请输入用户名') {this.value = '';}" onblur="if (this.value == '') {this.value = '请输入用户名';}"&&/div&&/p&&p&&div for="user_pass"&密&&&码&&&input type="password" name="pwd" id="user_pass" size="20" style="height:20color:#A84343" value=""&&/div&&/p&
&p class="forgetmenot"&&div for="rememberme" style="margin:10px 0;padding: 0 0 0 15"&&input name="rememberme" type="checkbox" id="rememberme" value="forever" checked& 记住登录信息&|&&a href="/wp-login.php?action=lostpassword"&忘记密码？&/a&&/div&&/p&
&p&&input type="submit" name="wp-submit" id="wp-submit" style="width: 85height: 35margin: 0 0 0 60cursor:" value="登录"&&span style="width: 85height: 35margin: 0 0 0 20cursor:" id="zuce"&注册&/span&
&input type="hidden" name="redirect_to" value="/"&
&input type="hidden" name="testcookie" value="1"&&/p&&/form&&/div&
function openLogin(){
document.getElementById("win").style.display="";
document.getElementById("back").style.display="";}
function closeLogin(){
document.getElementById("win").style.display="none";
document.getElementById("back").style.display="none";}
$('#zuce').click(function(){$('#back').load('/wp-content/themes/QIUYE/register.php');document.getElementById("back").style.display="";});
再把一下代码扔到register.php当中并保存上传到主题目录下：
&style&#win{-webkit-animation: bounce 1s .2-moz-animation: bounce 1s .2}#back{z-index:2;POSITION: left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.8);}&/style&
&div id="win" style="display: POSITION: margin: 0top:30%; width:400 height:250max-width:100%; border:1px solid #888; background:rgb(18, 93, 151) url('/lg2.jpg') no- color: rgb(18, 126, 61);text-align:padding: 0box-shadow: rgba(0,0,0,.8) 0 0 8"&
&div style="text-align:margin:8height:20"&&a href="javascript:closeLogin();" style="color: #438856;cursor:width: 30height: 20display:float:"&关闭&/a&&/div&
&form name="registerform" id="registerform" action="/wp-login.php?action=register" method="post" novalidate=""&
&p&&div for="user_login"&用&户&名&&&&input type="text" name="user_login" id="user_login" value="如:shazi" onfocus="if (this.value == '如:shazi') {this.value = '';}" onblur="if (this.value == '') {this.value = '如:shazi';}" style="height:20color:#A84343" size="20"&&/div&&/p&&p&&div for="user_email"&电子邮件&&&input type="email" name="user_email" id="user_email" value="如:" onfocus="if (this.value == '如:') {this.value = '';}" onblur="if (this.value == '') {this.value = '如:';}" style="height:20color:#A84343" size="20"&&/div&&/p&&input type="hidden" name="redirect_to" value=""&
&p class="forgetmenot"&
&div for="rememberme" style="margin:10px 0;padding: 0 0 0 15padding-left: 70"&密码将以电子邮件发送给你&/div&
&/p&&p&&input type="submit" name="wp-submit" id="wp-submit" style="width: 85height: 35margin: 0 0 0 60cursor:" value="注册"&&span style="width: 85height: 35margin: 0 0 0 20cursor:" id="denglu"&登录&/span&&/p&&/form&&/div&
function openLogin(){
document.getElementById("win").style.display="";
document.getElementById("back").style.display="";
}function closeLogin(){
document.getElementById("win").style.display="none";
document.getElementById("back").style.display="none";
}$('#denglu').click(function(){$('#back').load('/wp-content/themes/QIUYE/login.php');document.getElementById("back").style.display="";});
最后在前台需要显示登录的地方加上以下代码：
&span class="user_logged"&&a class="llogin"&登录&/a&&span class="textline"&&&/span&&a class="zzuce"&注册&/a&&/span&
最最后在主题的公共js文件中加上以下的代码：
jQuery(document).ready(function($){
$('.llogin').click(function() {$('#back').load('/wp-content/themes/QIUYE/login.php');document.getElementById("back").style.display="";});
$('.zzuce').click(function() {$('#back').load('/wp-content/themes/QIUYE/register.php');document.getElementById("back").style.display="";});});
注意把红色部分改成你的主题文件夹名称。其它类型网站还需要修改蓝色部分，总之按照自身情况修改自己的url。
看似代码复杂繁多，其实它一点都不影响网站打开速度，因为它是ajax异步加载功能~不要被虚无的外壳所迷惑。
转载请保留链接： | 出处：| 本文链接地址：
阅读本文的用户还浏览了
揭露一种ajax跨域病毒...
JQ的ajax点击事件只执行第一次的解决...
Ajax网页技术对网站SEO无影响...
Ajax重载页面js脚本代码失效的解决办...
卢哥ajax主题下载...
全站ajax技术实现的通用方法...
0.527秒内56次SQL查询|内存28.25MB
版权所有&& -&百家网络博客君，已阅读到文档的结尾了呢~~
本PPT包含了基于ASP.NET的用Ajax实现注册登录功能。详细介绍了需求分析及概要设计、数据库设计、Ajax.js文件概要等基础知识。
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
ASP.NET Ajax注册登录
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口&&& 今天把.net2.0的项目用vs2008打开，却发现项目中的ajax不起作用了，vs2008中已经安装了ajax，为啥不起作用了呢，最后才知道原因是这样：
ajax只能在.net2.0以上使用，由于.net3.5上已经集成了ajax，所以不用安装ASPAJAXExtSetup.msi，但是.net2.0没有集成，所以要安装ajax，果然，安装后，项目的ajax可以使用了，另外，还有一种方式，需要web.config和两个dll，就可以不用安装ajax，在web.config中添加以下代码：
&httpHandlers&&&&&&&&remove verb="*" path="*.asmx"/&&&&&&&&add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf"/&&&&&&&&add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf" validate="false"/&
&&&&&/httpHandlers&
&&&&&httpModules&&&&&&&&add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf"/&
&&&&&/httpModules&
然后再bin中添加
System.Web.Extensions.Design.dll，
System.Web.Extensions.Design.dll.refresh，
System.Web.Extensions.dll，
System.Web.Extensions.dll.refresh
下载地址：
页面中加上Page指令：&%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf"&&& Namespace="System.Web.UI" TagPrefix="asp" %&
有的时候节点&xhtmlConformance mode="Legacy"/&也会致使ajax无效，这个时候可以改下值&xhtmlConformance mode="Transitional"/&，或者将其删除也可以..
阅读(...) 评论()AJAX添加DOM元素然后对其操作 - ThinkPHP框架
网站使用了header.html，left.html，right.html，footer.html四大布局模板
用户现在在首页（调用了以上四大视图模板），点击header上的某个链接，通过ajax调用register.html视图模板中的代码，局部更新right中的数据为注册表单。此时我如果想对局部更新部分的表单应用表单前端自动验证JS代码，如jQuery Validation Engine 表单验证，就必须得在AJAX返回成功的函数中操作新添加如的DOM元素或者在返回的模板代码中添加JS函数，均无法成功
尝试/学习过：
参考了Live方法，新的delegate或者on方法，以及iframe，scriptexcute等，两天了一直未得要领，卡在这里了，还望大能们指点一二
right.html中带有：
&div id=&gird&&&/div&
register.html中带有：
&form action=&__SELF__& method=&post& id=&formID&&各个注册表单元件&/form&
试过在里面直接添加&script&$(&#form_1&).validationEngine();&/script&，能包括在返回ajax数据，但是页面html代码里找不到
header.html中带有：
$(document).ready(function(){
$(&.user-current a&).click(function(){
var clickitemid=$(this).attr(&id&);//判断是应该打开注册页还是登录页用
url: &{:U('Login/&+clickitemid+&')}&,
type:&GET&,
dataType:&json&,
async:false,
success:function(data){
$(&#gird&).empty();
$(&#gird&).append(data);
$(&#formID&).validationEngine();//来自表单验证插件，不起作用，估计DOM还没加载完
error:function(msg){
alert('error');
Login控制器中的register操作如下（拷贝自本网站 - 未作细节修改，测试用）：
class LoginController extends Controller {
* 用户注册
public function register()
// 判断提交方式 做不同处理，前端AJAX函数写的是GET方法，因此会先初始化，然后在表单点击才是POST方法
if (IS_POST) {
// 实例化User对象
$user = D('users');
// 自动验证 创建数据集
if (!$data = $user-&create()) {
// 防止输出中文乱码
header(&Content-type: text/ charset=utf-8&);
exit($user-&getError());
//插入数据库
if ($id = $user-&add($data)) {
$user-&where(&userid = $id&)-&setField('companyid', $id);
$this-&success('注册成功', U('Index/index'), 2); //U('Index/index')
$this-&error('注册失败');
$content = $this-&fetch('Login/register'); //初始化调用register.html模板
echo json_encode($content); //返回ajax数据
数据库/模型：不作细节描述
希望能得到指点：
1. 如何在AJAX返回并添加到Div的数据中包括script并嵌入页面代码中（能显示在firebug的html里）。返回的数据用text方法能看到有script，但是一局部更新到div就不显示了
2. 该怎么编写JS操作动态更新的DOM
3. 有没有什么类似的如再次更新document.ready的方法可以调用局部更新的DOM元素。关键这里只是局部更新，不是整页更新。
谢谢各位。本人不是专业开发者，才识疏漏之处还望见谅。
thinkphpisgood
ThinkPHP 是一个免费开源的，快速、简单的面向对象的 轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国内最领先和最具影响力的WEB应用开发框架，众多的典型案例确保可以稳定用于商业以及门户级的开发。