作者:mobiledu2502871243 | 来源:互联网 | 2013-08-08 17:37
如果你对JQuery的基本语法还不是很熟悉,请搜索本站的教程资源。如果你对PHPMailer用法不熟悉,请查看本站的另一篇文章《使用PHPMailer类库发送电子邮件》。
如果你对JQuery的基本语法还不是很熟悉,请搜索本站的教程资源。如果你对PHPMailer用法不熟悉,请查看本站的另一篇文章《使用PHPMailer类库发送电子邮件》。
第一步,创建一个表单HTML页面
这里,我们只展示主要的表单部分HTML结构代码:
代码如下:
几点注意:
这里用一个id为contact_form来包含整个包含信息;这是有意义的,稍后在Javascript与用户交互信息的时候会用到。
大家应该注意到了,这里form标签的属性里面既包含了method和action;这个意义其实不大,因为Javascript直接操作DOM,所以没有这两个属性也是可以的;
务必要给用户输入的 标签加独立的id,这和第二点原理类似。否则,无法看到正常的效果。
第二步,开始添加JQuery代码
这里假设你已经从JQuery官方网站上下载了JQuery基库,然后上传到了你的WEB服务器,并添加到你要使用的网页中了。
现在另外新建一个JS文件,添加如下代码:
代码如下:
$(function() {
$(".button").click(function() {
// 处理表单验证和交给后台处理的逻辑
});
});
第一行的function()函数与Jquery的document.ready函数用法和功能相同,都是在DOM准备完毕后自动触发。
第二行里面是一个单击触发函数click(),需要注意的是,在HTML一页提交按钮上需要放置一个名为“button”的Class,以模拟实现submi提交表单的功能.
从第二点我们可以看出,JQuery可以很好的将结构和逻辑分离。
第三步,编写验证代码
在实际应用中,这一步是必不可少的。在用户漏填,错填某个项目时,及时提示。
代码如下:
$(function() {
$('.error').hide();
$(".button").click(function() {
// 验证代码
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phOne= $("input#phone").val();
if (phOne== "") {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
});
});
几点注意:
第2行,我们添加一个$('.error').hide()是为了在用户未输入任何信息时隐藏三个class="error"提示错误的label标签。而只有当出现错误,即为空时,错误才会出现。(因为有return false的作用,每次仅会出现一个错误)
在JQuery里面,获取DOM中某个ID或者Class的值非常简单
代码如下:
//获取id的值
var name = $("input#name").val();
//获取class序号为1的值
var name = $(".name")[1].val();
现假设用户没有输入姓名,处理逻辑应该是:首先显示错误,然后将焦点定位在姓名上。
if (name == "") { //用户名为空
$("label#name_error").show(); //错误提示
$("input#name").focus(); //焦点定位
return false; //返回
}
在必填的字段上验证时,都必须return false,否则会出现必填项未填完即提交的情况。
第四步,通过Jquery的Ajax函数提交表单信息。
这是本教程实现无刷新提交的核心步骤,通过ajax函数来递交Javascript从DOM中获取的表单项值,然后异步提交给后台处理程序(process.php),并发送Email。此步紧接在验证程序之后:
代码如下:
var dataString = 'name='+ name + '&email=' + email + '&phOne=' + phone;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("
");
$('#message').html("
联系方式已成功提交! ")
.append("
Script by Code52.net
")
.hide()
.fadeIn(1500, function() {
$('#message').append("
");
});
}
});
return false;
以上代码的核心函数是.ajax() ,它所起得作用就是使用POST方式将已经获取的表单信息(dataString)异步传送给所定义的后台PHP url(bin/process.php)。如果数据成功传送,它会将一系列我们定义好的信息返回给用户。最后return false,这样是为了防止页面重新加载。
除了返回成功信息和发送邮件外,我们还可以做其他一些更广泛的事情。比如,将获得的数据交由后台脚本处理时,将数据插入数据库中,然后再将用户提交的信息返回。
详细解释:
首先,获取表单项的值,方法我们已经在第三步中提到过了:
var name = $("input#name").val();
var email = $("input#email").val();
var phOne= $("input#phone").val();
//将表单项的值组合成一个字符串
var dataString = 'name='+ name + '&email=' + email + '&phOne=' + phone;
将此组合字符串的值通过AJAX函数传递给后台url,如果成功,则会返回成功信息给用户:
代码如下:
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("
");
$('#message').html("
Contact Form Submitted! ")
.append("
We will be in touch soon.
")
.hide()
.fadeIn(1500, function() {
$('#message').append("
");
});
}
});
return false;
在本示例中,ajax函数的功能就只有这些了,如果你需要进一步关于ajax函数的信息,可以参考官方文档:jQuery's documentation on the ajax function
第五步,反馈信息给用户的部分
首先,在信息提交成功之后,JQuery会通过以下部分动态的替换掉
推荐阅读
本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ...
[详细]
蜡笔小新 2023-12-09 17:40:33
本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ...
[详细]
蜡笔小新 2023-12-11 10:07:32
本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ...
[详细]
蜡笔小新 2023-12-10 10:55:21
本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ...
[详细]
蜡笔小新 2023-12-14 19:45:47
本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ...
[详细]
蜡笔小新 2023-12-14 17:15:19
本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ...
[详细]
蜡笔小新 2023-12-14 16:12:01
本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ...
[详细]
蜡笔小新 2023-12-14 15:52:03
本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ...
[详细]
蜡笔小新 2023-12-14 13:56:20
本文介绍了使用PHP实现断点续传乱序合并文件的方法和源码。由于网络原因,文件需要分割成多个部分发送,因此无法按顺序接收。文章中提供了merge2.php的源码,通过使用shuffle函数打乱文件读取顺序,实现了乱序合并文件的功能。同时,还介绍了filesize、glob、unlink、fopen等相关函数的使用。阅读本文可以了解如何使用PHP实现断点续传乱序合并文件的具体步骤。 ...
[详细]
蜡笔小新 2023-12-14 04:33:19
本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ...
[详细]
蜡笔小新 2023-12-13 18:08:58
本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ...
[详细]
蜡笔小新 2023-12-13 15:50:17
在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ...
[详细]
蜡笔小新 2023-12-12 14:56:31
随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ...
[详细]
蜡笔小新 2023-12-10 20:05:15
web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ...
[详细]
蜡笔小新 2023-10-17 20:40:03
mobiledu2502871243
这个家伙很懒,什么也没留下!