JQuery打造PHP的AJAX表单提交实例
发布时间：2023-02-16 12:40:56 所属栏目：PHP 来源：互联网
导读：本实例只利用到JQuery类库本身的函数和功能，不需要第三方插件的支持。另外，所有表单信息都是利用PHPMailer类库邮件的形式发送给管理员。 如果你对JQuery的基本语法还不是很熟悉，请搜索本站的教程资源。如果你对PHPMailer用法不熟悉，请查看本站的另一篇文
|
本实例只利用到JQuery类库本身的函数和功能，不需要第三方插件的支持。另外，所有表单信息都是利用PHPMailer类库邮件的形式发送给管理员。 如果你对JQuery的基本语法还不是很熟悉，请搜索本站的教程资源。如果你对PHPMailer用法不熟悉，请查看本站的另一篇文章《使用PHPMailer类库发送电子邮件》。 第一步，创建一个表单HTML页面 这里，我们只展示主要的表单部分HTML结构代码： <div id="contact_form"> <form name="contact" method="post" action=""> <fieldset> <label for="name" id="name_label">姓名</label> <input type="text" name="name" id="name" size="30" value="" class="text-input" /> <label class="error" for="name" id="name_error">此项必填</label> <label for="email" id="email_label">您的Email</label> <input type="text" name="email" id="email" size="30" value="" class="text-input" /> <label class="error" for="email" id="email_error">此项必填</label> <label for="phone" id="phone_label">您的联系电话</label> <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> <label class="error" for="phone" id="phone_error">此项必填</label> <br /> <input type="submit" name="submit" class="button" id="submit_btn" value="我要发送" /> </fieldset> </form> </div> 几点注意： 这里用一个id为contact_form来包含整个包含信息；这是有意义的，稍后在JavaScript与用户交互信息的时候会用到。 大家应该注意到了，这里form标签的属性里面既包含了method和action；这个意义其实不大，因为Javascript直接操作DOM，所以没有这两个属性也是可以的； 务必要给用户输入的<input>标签加独立的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("<div id='message'></div>"); $('#message').html("<h2>联系方式已成功提交！</h2>") .append("<p>Script by Code52.net</p>") .hide() .fadeIn(1500,function() { $('#message').append("<img id='checkmark' src='images/check.png' />"); }); } }); 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; （编辑：甘南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
