使用Mootools的通讯注册表单，无需重新加载页面 [英] Newsletter Signup Form using Mootools, no page reload
本文介绍了使用Mootools的通讯注册表单，无需重新加载页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在寻找一个很好的mootools脚本，用于一个简单的新闻简报注册表单，里面有一行输入字段+发送按钮。 '试图考虑：
- 无需重新加载表单提交
- 我不想拥有使用jQuery或
Protoype或Mootools
之外的任何其他库（我已经为该站点的其他部分使用了Mootools
，并且
为$ b添加了更多库） $ b创造太多混乱我想？） - 尝试找到一个有很好的但是
的简单效果（比如当$ b时旋转
loading $ b正在发送......但仅在
中找到了这个目前的jQuery / Prototype） - 我使用干净的URL：.htaccess到
发送URI到index.php，然后
解析URL并计算出包含哪些
php文件以创建每个
页面。换句话说，我不确定
是否有办法将
验证/插入到mysql
中，而不会破坏URL？
您可以使用
Ajax.Form 方法，找到这里 - 这是一个用于存储数据的ajax post / post-back方法。 以下是代码中的瘦身：
$（'myForm '）.addEvent（'submit'，function（e）{
/ **
*防止提交事件
* /
new Event（e）.stop（）;
$ b $ **
*这会清空日志并显示旋转指示器
* /
var log = $（'log_res'）。empty（）。addClass （'ajax-loading'）;
/ **
* send负责编码并返回Ajax实例
* onComplete从日志中移除微调器
* /
this.send（{
update：log，
onComplete：function（）{
log.removeClass（'ajax-loading'）;
}
}）;
}）;
使用此参考代码的HTML / CSS：
< h3>使用Ajax发送表单< / h3>
< p>< a href =demos / Ajax.Form / ajax.form.phps>请参阅ajax.form.phps< / a>< / p>
< form id =myFormaction =demos / Ajax.Form / ajax.form.phpmethod =get>
< div id =form_box>
< div>
< p>名字：< / p>
< input type =textname =first_namevalue =John/>
< / div>
< div>
< p>姓氏：< / p>
< input type =textname =last_namevalue =Q/>
< / div>
< div>
< p>电子邮件：< / p>
< input type =textname =e_mailvalue =john.q@mootools.net/>
< / div>
< div>
< p> MooTooler：< / p>
< input type =checkboxname =mootoolervalue =yeschecked =checked/>
< / div>
< div>
< p> Mootools新手：< / p>
< option value =yesselected =selected> yes< / option>
< option value =no> no< / option>
< / select>
< / div>
< div class =hr><！ - spanner - >< / div>
< input type =submitname =buttonid =submitter/>
< span class =clr><！ - spanner - >< / span>
< / div>
< / form>
< div id =log>
< h3> Ajax响应< / h3>
< div id =log_res><！ - spanner - >< / div>
< / div>
< span class =clr><！ - spanner - >< / span>
其他参考CSS：
#form_box {
float：left;
width：290px;
背景：＃f8f8f8;
border：1px solid＃d6d6d6;
border-left-color：＃e4e4e4;
border-top-color：＃e4e4e4;
font-size：11px;
font-weight：bold;
填充：0.5em;
margin-top：10px;
margin-bottom：2px;
}
#form_box div {
height：25px;
填充：0.2em 0.5em;
}
#form_box div.hr {
border-bottom：2px solid＃e2e2e1;
height：0px;
margin-top：0pt;
margin-bottom：7px;
}
#form_box p {
float：left;
保证金：4px 0pt;
width：120px;
}
#log {
float：left;
填充：0.5em;
margin-left：10px;
width：290px;
border：1px solid＃d6d6d6;
border-left-color：＃e4e4e4;
border-top-color：＃e4e4e4;
margin-top：10px;
}
#log_res {
overflow：auto;
}
＃log_res.ajax-loading {
padding：20px 0;
background：url（http://demos111.mootools.net/demos/Group/spinner.gif）无重复中心;
}
希望这有助于您。
I've been searching a lot for a good mootools script for a simple newsletter signup form with a one-line input field + send button.
Some things I'm trying to consider:
- form submission without reloading
- I don't want to have to use jQuery or Protoype or any other library outside of Mootools (I already have Mootools for some other parts of the site, and adding more libraries to that would create too much clutter I think?)
- Trying to find one with nice but simple effects (like the spinning "loading" image when it's sending...but only found this for jQuery/Prototype so far)
- I'm using clean urls: .htaccess to send the URI to index.php, which then parses the URL and figures out what php files to include to create each page. In other words, I'm not sure if there's a way to do the validation/insert entries into mysql without messing with the URL?
Any help would be much appreciated, thank you!
解决方案
You can use the Ajax.Form method, found here - This is an ajax post/post-back method for storing your data.
Here's the skinny on the code:
$('myForm').addEvent('submit', function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();
/**
* This empties the log and shows the spinning indicator
*/
var log = $('log_res').empty().addClass('ajax-loading');
/**
* send takes care of encoding and returns the Ajax instance.
* onComplete removes the spinner from the log.
*/
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
}
});
});
HTML/CSS to use with this reference code:
<h3>Send a Form with Ajax</h3>
<p><a href="demos/Ajax.Form/ajax.form.phps">See ajax.form.phps</a></p>
<form id="myForm" action="demos/Ajax.Form/ajax.form.php" method="get">
<div id="form_box">
<div>
<p>First Name:</p>
<input type="text" name="first_name" value="John" />
</div>
<div>
<p>Last Name:</p>
<input type="text" name="last_name" value="Q" />
</div>
<div>
<p>E-Mail:</p>
<input type="text" name="e_mail" value="john.q@mootools.net" />
</div>
<div>
<p>MooTooler:</p>
<input type="checkbox" name="mootooler" value="yes" checked="checked" />
</div>
<div>
<p>New to Mootools:</p>
<select name="new">
<option value="yes" selected="selected">yes</option>
<option value="no">no</option>
</select>
</div>
<div class="hr"><!-- spanner --></div>
<input type="submit" name="button" id="submitter" />
<span class="clr"><!-- spanner --></span>
</div>
</form>
<div id="log">
<h3>Ajax Response</h3>
<div id="log_res"><!-- spanner --></div>
</div>
<span class="clr"><!-- spanner --></span>
Additional reference CSS:
#form_box {
float: left;
width: 290px;
background: #f8f8f8;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
font-size: 11px;
font-weight: bold;
padding: 0.5em;
margin-top: 10px;
margin-bottom: 2px;
}
#form_box div {
height: 25px;
padding: 0.2em 0.5em;
}
#form_box div.hr {
border-bottom: 2px solid #e2e2e1;
height: 0px;
margin-top: 0pt;
margin-bottom: 7px;
}
#form_box p {
float: left;
margin: 4px 0pt;
width: 120px;
}
#log {
float: left;
padding: 0.5em;
margin-left: 10px;
width: 290px;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
margin-top: 10px;
}
#log_res {
overflow: auto;
}
#log_res.ajax-loading {
padding: 20px 0;
background: url(http://demos111.mootools.net/demos/Group/spinner.gif) no-repeat center;
}
Hope this helps.
这篇关于使用Mootools的通讯注册表单，无需重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
