JQuery打造PHP的AJAX表单提交实例

发布时间：2023-02-16 12:40:56 所属栏目：PHP 来源：互联网

导读：本实例只利用到JQuery类库本身的函数和功能，不需要第三方插件的支持。另外，所有表单信息都是利用PHPMailer类库邮件的形式发送给管理员。如果你对JQuery的基本语法还不是很熟悉，请搜索本站的教程资源。如果你对PHPMailer用法不熟悉，请查看本站的另一篇文

　　将此组合字符串的值通过AJAX函数传递给后台url，如果成功，则会返回成功信息给用户：

　　$.ajax({

　　type: "POST",

　　success: function() {

　　$('#contact_form').html("<div id='message'></div>");

　　$('#message').html("<h2>Contact Form Submitted!</h2>")

　　.append("<p>We will be in touch soon.</p>")

　　.hide()

　　.fadeIn(1500,function() {

　　$('#message').append("<img id='checkmark' src='images/check.png' />");

　　});

　　}

　　});

　　return false;

　　在本示例中，ajax函数的功能就只有这些了，如果你需要进一步关于ajax函数的信息，可以参考官方文档：jQuery's documentation on the ajax function

　　第五步，反馈信息给用户的部分

　　首先，在信息提交成功之后，JQuery会通过以下部分动态的替换掉<div id="contact_form"></form>中的内容，只需要简单的一句话即可实现。

　　$('#contact_form').html("<div id='message'></div>");

　　所以请大家记住，如果你以后需要通过JavaScript动态的替换掉某个层或者<span>，可以使用Jquery的.html方法实现，非常简单和方便。

　　其次，有了这个层肯定还不够，因为里面还没有内容，所以，我们还要给id=message的这个层添加一些显示内容：

　　$('#message').html("<h2>联系方式已成功提交！</h2>")

　　同样是动态的为id为message的层添加了一段html用于提示。还可以利用append方法在message层中追加一句：

　　.append("<p>We will be in touch soon.</p>")

　　最后，为了表现出提交之后，服务器处理的动态效果，我们设置了以下特效代码：

　　.hide() //整个层消失

　　.fadeIn(1500,function() {//在1500毫秒内逐渐出现

　　//最后再动态追加一个成功图标

　　$('#message').append("<img id='checkmark' src='images/check.png' />");

　　});

　　后记：如果要将此实例运用在实际中，可能还需要对一些地方做出修改。比如，增加验证信息规则，在用户提交信息的过程中设置一个Loading的图标等等，本教程仅作抛砖引玉之用了。另外，请注意，后台提交数据给邮箱，我这里就不再解释了。打包下载的实例中有很详细的注释，你需要改动的地方仅仅是用户名和密码。下载压缩包之后，你也许会发现里面有个runonload.js文件，此文件的作用是在加载表单文件时，将焦点聚焦在输入表单上，仅此而已。

（编辑：甘南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2/2

首页