欢迎光临
我们一直在努力

WordPress 创建AJAX免刷新联系表单

建站超值云服务器,限时71元/月

本文目录
[隐藏]

  • 1创建 HTML 表单
  • 2使用 AJAX 提交表单数据
  • 3创建PHP邮件脚本

对于大多说网站来说,联系表单是必备功能之一。倡萌之前分享过 为你的 WordPress 主题创建内置的联系表单,而今天这篇教程,你将学习如何创建使用Ajax提交表单数据的联系表单。我们将使用jQuery来帮助简化JavaScript代码和一个简单的PHP邮件脚本来处理通过电子邮件发送表单数据。下面就开始吧。

创建 HTML 表单

首先我们要创建联系表单的基本 HTML 内容,给 <form> 元素添加ID ajax-contact,设置 method 属性为 postaction 属性为 mailer.php(注意,要填写 mailer.php 文件的真实路径)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form id="ajax-contact" method="post" action="mailer.php">
    <div class="field">
        <label for="name">名字:</label>
        <input type="text" id="name" name="name" required>
    </div>
 
    <div class="field">
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required>
    </div>
 
    <div class="field">
        <label for="message">信息:</label>
        <textarea id="message" name="message" required></textarea>
    </div>
 
    <div class="field">
        <button type="submit">发送</button>
    </div>
</form>

<form id=”ajax-contact” method=”post” action=”mailer.php”> <div class=”field”> <label for=”name”>名字:</label> <input type=”text” id=”name” name=”name” required> </div> <div class=”field”> <label for=”email”>邮箱:</label> <input type=”email” id=”email” name=”email” required> </div> <div class=”field”> <label for=”message”>信息:</label> <textarea id=”message” name=”message” required></textarea> </div> <div class=”field”> <button type=”submit”>发送</button> </div> </form>

现在已经创建了一个表单来收集名字、邮箱和信息,而且每个表单都添加了一个 required 属性,这个可以让那些支持 HTML5 表单验证的浏览器,来验证这些表单必须已经填写内容才可以提交。

接下来创建一个 <div> 元素来显示成功或错误信息给用户,在上面的 <form> 的上方添加一个 ID 为 form-messages 的<div>:

1
<div id="form-messages"></div>

<div id=”form-messages”></div>

现在下载所需的代码文件,在你的项目中创建一个 contact 文件夹,将解压出来的文件复制到这个文件夹中 ,然后引用这些文件:

1
2
3
<link rel="stylesheet" href="/contact/style.css">
<script src="/contact/jquery-2.1.0.min.js"></script>
<script src="/contact/app.js"></script>

<link rel=”stylesheet” href=”/contact/style.css”> <script src=”/contact/jquery-2.1.0.min.js”></script> <script src=”/contact/app.js”></script>

请注意根据自己的实际修改上面文件的引用地址。app.js 需要 jquery 库的支持,所以这里引入 jquery-2.1.0.min.js,如果你的项目中已经早就引入了,就没必要重复。到这里基本的 HTML 代码已经完成,下面我们要接着弄 JavaScript。

使用 AJAX 提交表单数据

创建一个 app.js 文件,添加下面的代码,请注意看下面的代码注释(下载的文件包的 app.js 已经包含):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
$(function() {
 
	// 获取表单
	var form = $('#ajax-contact');
 
	// 获取显示消息的div
	var formMessages = $('#form-messages');
 
	// 为联系表单创建事件监听
	$(form).submit(function(e) {
		// 阻止浏览器直接提交表单
		e.preventDefault();
 
		// 序列化表单数据
		var formData = $(form).serialize();
 
		// 使用AJAX提交表单
		$.ajax({
			type: 'POST',
			url: $(form).attr('action'),
			data: formData
		})
		.done(function(response) {
			// 确保formMessages的div有“success”这个类
			$(formMessages).removeClass('error');
			$(formMessages).addClass('success');
 
			// 设置消息文本
			$(formMessages).text(response);
 
			// 清除表单
			$('#name').val('');
			$('#email').val('');
			$('#message').val('');
		})
		.fail(function(data) {
			// 确保formMessages的div有“error”这个类
			$(formMessages).removeClass('success');
			$(formMessages).addClass('error');
 
			// 设置消息文本
			if (data.responseText !== '') {
				$(formMessages).text(data.responseText);
			} else {
				$(formMessages).text('糟糕!发生错误,无法发送邮件。');
			}
		});
 
	});
 
});

$(function() { // 获取表单 var form = $(‘#ajax-contact’); // 获取显示消息的div var formMessages = $(‘#form-messages’); // 为联系表单创建事件监听 $(form).submit(function(e) { // 阻止浏览器直接提交表单 e.preventDefault(); // 序列化表单数据 var formData = $(form).serialize(); // 使用AJAX提交表单 $.ajax({ type: ‘POST’, url: $(form).attr(‘action’), data: formData }) .done(function(response) { // 确保formMessages的div有“success”这个类 $(formMessages).removeClass(‘error’); $(formMessages).addClass(‘success’); // 设置消息文本 $(formMessages).text(response); // 清除表单 $(‘#name’).val(”); $(‘#email’).val(”); $(‘#message’).val(”); }) .fail(function(data) { // 确保formMessages的div有“error”这个类 $(formMessages).removeClass(‘success’); $(formMessages).addClass(‘error’); // 设置消息文本 if (data.responseText !== ”) { $(formMessages).text(data.responseText); } else { $(formMessages).text(‘糟糕!发生错误,无法发送邮件。’); } }); }); });

这样就完成了构建一个AJAX的联系表单所需的HTML和JavaScript代码。在下一节中,你将了解邮件的脚本,它负责处理表单数据并发送了一封电子邮件。

创建PHP邮件脚本

现在是时候来写PHP邮件脚本,用来处理表单数据。这个简单的脚本是负责检查表单数据是有效的,然后发送邮件。如果发生错误,该邮件脚本会回应一个适当的状态代码,以提供给之前写的 JavaScript  fail 回调中执行。

创建一个 mailer.php 文件,添加下面的代码(下载的代码文件中 mailer.php 已经包含):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
 
	// 只处理 POST 请求
	if ($_SERVER["REQUEST_METHOD"] == "POST") {
		// 获取表单字段并删除空白
		$name = trim($_POST["name"]);
		$email = trim($_POST["email"]);
		$message = trim($_POST["message"]);
 
		// 检查要发送邮件的数据
		if ($name == "" OR $email == "" OR $message == "") {
			// 设置一个400(错误请求)响应代码并退出
			http_response_code(400);
			echo "糟糕!您提交数据时出现了一个问题。请填完表格,然后再试一次。";
			exit;
		}
 
		// 设置收件人的电子邮件地址
		// 请修改为你自己的接受邮件地址
		$recipient = "text@example.com";
 
		// 设置电子邮件的主题
		$subject = "来自 $name 的新信息";
 
		// 建立电子邮件内容
		$email_content = "名字: $name\n";
		$email_content .= "邮箱: $email\n\n";
		$email_content .= "信息:\n$message\n";
 
		// 建立电子邮件标头
		$email_headers = "来自: $name <$email>";
 
		// 发送邮件
		if (mail($recipient, $subject, $email_content, $email_headers)) {
			// 设置200(成功)响应代码
			http_response_code(200);
			echo "谢谢您!您的消息已发送。";
		} else {
			// 设置500(内部服务器错误)响应代码
			http_response_code(500);
			echo "糟糕!出事了,我们无法发送邮件。";
		}
 
	} else {
		// 不是一个POST请求,设置一个403(禁止)响应代码
		http_response_code(403);
		echo "您提交的过程出现了一个错误,请重试。";
	}
 
?>

<?php // 只处理 POST 请求 if ($_SERVER[“REQUEST_METHOD”] == “POST”) { // 获取表单字段并删除空白 $name = trim($_POST[“name”]); $email = trim($_POST[“email”]); $message = trim($_POST[“message”]); // 检查要发送邮件的数据 if ($name == “” OR $email == “” OR $message == “”) { // 设置一个400(错误请求)响应代码并退出 http_response_code(400); echo “糟糕!您提交数据时出现了一个问题。请填完表格,然后再试一次。”; exit; } // 设置收件人的电子邮件地址 // 请修改为你自己的接受邮件地址 $recipient = “text@example.com”; // 设置电子邮件的主题 $subject = “来自 $name 的新信息”; // 建立电子邮件内容 $email_content = “名字: $name\n”; $email_content .= “邮箱: $email\n\n”; $email_content .= “信息:\n$message\n”; // 建立电子邮件标头 $email_headers = “来自: $name <$email>”; // 发送邮件 if (mail($recipient, $subject, $email_content, $email_headers)) { // 设置200(成功)响应代码 http_response_code(200); echo “谢谢您!您的消息已发送。”; } else { // 设置500(内部服务器错误)响应代码 http_response_code(500); echo “糟糕!出事了,我们无法发送邮件。”; } } else { // 不是一个POST请求,设置一个403(禁止)响应代码 http_response_code(403); echo “您提交的过程出现了一个错误,请重试。”; } ?>

这个脚本首先检查该请求是通过POST方法发送。如果不是,该脚本将返回一个403(禁止)HTTP状态代码和错误消息。

接着创建变量获取发件人的名字、邮箱和信息,并使用 trim() 函数除去这些字段的空白字符,然后检查这些字段是否都已经填写完整,如果没有,返回 400 响应代码,同时提示错误。

接着创建变量获取邮件所需的其他信息,比如收件人的邮箱、邮件主题、标头等等,接下来,将尝试使用PHP的mail函数发送电子邮件。如果成功,将返回成功的消息。如果不是的话,你需要的响应代码为500(内部服务器错误),并返回一个错误消息。

需要注意一下,发送邮件需要主机的支持,也就要确保PHP开启了 mail() 函数。

好了,到这里所有的工作都完成了。

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » WordPress 创建AJAX免刷新联系表单
分享到: 更多 (0)