加入收藏 | 设为首页 | 会员中心 | 我要投稿 源码门户网 (https://www.92codes.com/)- 云服务器、云原生、边缘计算、云计算、混合云存储!
当前位置: 首页 > 站长学院 > PHP教程 > 正文

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

发布时间:2023-12-22 21:58:51 所属栏目:PHP教程 来源:DaWei
导读: 本实例只利用到JQuery类库本身的函数和功能,不需要第三方插件的支持。另外,所有表单信息都是利用PHPMailer类库邮件的形式发送给管理员。

如果你对JQuery的基本语法还不是很熟悉,请搜索
本实例只利用到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; 

将此组合字符串的值通过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' />"); 

}); 

(编辑:源码门户网)

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

    推荐文章