WordPress 創(chuàng)建AJAX免刷新聯(lián)系表單

對于大多說網(wǎng)站來說，聯(lián)系表單是必備功能之一。倡萌之前分享過 為你的 WordPress 主題創(chuàng)建內(nèi)置的聯(lián)系表單，而今天這篇教程，你將學(xué)習(xí)如何創(chuàng)建使用Ajax提交表單數(shù)據(jù)的聯(lián)系表單。我們將使用jQuery來幫助簡化JavaScript代碼和一個(gè)簡單的PHP郵件腳本來處理通過電子郵件發(fā)送表單數(shù)據(jù)。下面就開始吧。

創(chuàng)建 HTML 表單

首先我們要?jiǎng)?chuàng)建聯(lián)系表單的基本 HTML 內(nèi)容，給 <form> 元素添加ID ajax-contact，設(shè)置 method 屬性為 post，action 屬性為 mailer.php（注意，要填寫 mailer.php 文件的真實(shí)路徑）。

<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">發(fā)送</button>
    </div>
</form>

現(xiàn)在已經(jīng)創(chuàng)建了一個(gè)表單來收集名字、郵箱和信息，而且每個(gè)表單都添加了一個(gè) required 屬性，這個(gè)可以讓那些支持 HTML5 表單驗(yàn)證的瀏覽器，來驗(yàn)證這些表單必須已經(jīng)填寫內(nèi)容才可以提交。

接下來創(chuàng)建一個(gè) <div> 元素來顯示成功或錯(cuò)誤信息給用戶，在上面的 <form> 的上方添加一個(gè) ID 為 form-messages 的<div>:

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

現(xiàn)在下載所需的代碼文件，在你的項(xiàng)目中創(chuàng)建一個(gè) contact 文件夾，將解壓出來的文件復(fù)制到這個(gè)文件夾中 ，然后引用這些文件：

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

請注意根據(jù)自己的實(shí)際修改上面文件的引用地址。app.js 需要 jquery 庫的支持，所以這里引入 jquery-2.1.0.min.js，如果你的項(xiàng)目中已經(jīng)早就引入了，就沒必要重復(fù)。到這里基本的 HTML 代碼已經(jīng)完成，下面我們要接著弄 JavaScript。

使用 AJAX 提交表單數(shù)據(jù)

創(chuàng)建一個(gè) app.js 文件，添加下面的代碼，請注意看下面的代碼注釋（下載的文件包的 app.js 已經(jīng)包含）：

$(function() {

	// 獲取表單
	var form = $('#ajax-contact');

	// 獲取顯示消息的div
	var formMessages = $('#form-messages');

	// 為聯(lián)系表單創(chuàng)建事件監(jiān)聽
	$(form).submit(function(e) {
		// 阻止瀏覽器直接提交表單
		e.preventDefault();

		// 序列化表單數(shù)據(jù)
		var formData = $(form).serialize();

		// 使用AJAX提交表單
		$.ajax({
			type: 'POST',
			url: $(form).attr('action'),
			data: formData
		})
		.done(function(response) {
			// 確保formMessages的div有“success”這個(gè)類
			$(formMessages).removeClass('error');
			$(formMessages).addClass('success');

			// 設(shè)置消息文本
			$(formMessages).text(response);

			// 清除表單
			$('#name').val('');
			$('#email').val('');
			$('#message').val('');
		})
		.fail(function(data) {
			// 確保formMessages的div有“error”這個(gè)類
			$(formMessages).removeClass('success');
			$(formMessages).addClass('error');

			// 設(shè)置消息文本
			if (data.responseText !== '') {
				$(formMessages).text(data.responseText);
			} else {
				$(formMessages).text('糟糕！發(fā)生錯(cuò)誤，無法發(fā)送郵件。');
			}
		});

	});

});

這樣就完成了構(gòu)建一個(gè)AJAX的聯(lián)系表單所需的HTML和JavaScript代碼。在下一節(jié)中，你將了解郵件的腳本，它負(fù)責(zé)處理表單數(shù)據(jù)并發(fā)送了一封電子郵件。

創(chuàng)建PHP郵件腳本

現(xiàn)在是時(shí)候來寫PHP郵件腳本，用來處理表單數(shù)據(jù)。這個(gè)簡單的腳本是負(fù)責(zé)檢查表單數(shù)據(jù)是有效的，然后發(fā)送郵件。如果發(fā)生錯(cuò)誤，該郵件腳本會(huì)回應(yīng)一個(gè)適當(dāng)?shù)臓顟B(tài)代碼，以提供給之前寫的 JavaScript  fail 回調(diào)中執(zhí)行。

創(chuàng)建一個(gè) mailer.php 文件，添加下面的代碼（下載的代碼文件中 mailer.php 已經(jīng)包含）：

<?php
	
	// 只處理 POST 請求
	if ($_SERVER["REQUEST_METHOD"] == "POST") {
		// 獲取表單字段并刪除空白
		$name = trim($_POST["name"]);
		$email = trim($_POST["email"]);
		$message = trim($_POST["message"]);

		// 檢查要發(fā)送郵件的數(shù)據(jù)
		if ($name == "" OR $email == "" OR $message == "") {
			// 設(shè)置一個(gè)400（錯(cuò)誤請求）響應(yīng)代碼并退出
			http_response_code(400);
			echo "糟糕！您提交數(shù)據(jù)時(shí)出現(xiàn)了一個(gè)問題。請?zhí)钔瓯砀瘢缓笤僭囈淮巍?;
			exit;
		}

		// 設(shè)置收件人的電子郵件地址
		// 請修改為你自己的接受郵件地址
		$recipient = "text@example.com";

		// 設(shè)置電子郵件的主題
		$subject = "來自 $name 的新信息";

		// 建立電子郵件內(nèi)容
		$email_content = "名字: $name\n";
		$email_content .= "郵箱: $email\n\n";
		$email_content .= "信息:\n$message\n";

		// 建立電子郵件標(biāo)頭
		$email_headers = "來自: $name <$email>";

		// 發(fā)送郵件
		if (mail($recipient, $subject, $email_content, $email_headers)) {
			// 設(shè)置200（成功）響應(yīng)代碼
			http_response_code(200);
			echo "謝謝您！您的消息已發(fā)送。";
		} else {
			// 設(shè)置500（內(nèi)部服務(wù)器錯(cuò)誤）響應(yīng)代碼
			http_response_code(500);
			echo "糟糕！出事了，我們無法發(fā)送郵件。";
		}

	} else {
		// 不是一個(gè)POST請求，設(shè)置一個(gè)403（禁止）響應(yīng)代碼
		http_response_code(403);
		echo "您提交的過程出現(xiàn)了一個(gè)錯(cuò)誤，請重試。";
	}

?>

這個(gè)腳本首先檢查該請求是通過POST方法發(fā)送。如果不是，該腳本將返回一個(gè)403（禁止）HTTP狀態(tài)代碼和錯(cuò)誤消息。

接著創(chuàng)建變量獲取發(fā)件人的名字、郵箱和信息，并使用 trim() 函數(shù)除去這些字段的空白字符，然后檢查這些字段是否都已經(jīng)填寫完整，如果沒有，返回 400 響應(yīng)代碼，同時(shí)提示錯(cuò)誤。

接著創(chuàng)建變量獲取郵件所需的其他信息，比如收件人的郵箱、郵件主題、標(biāo)頭等等，接下來，將嘗試使用PHP的mail函數(shù)發(fā)送電子郵件。如果成功，將返回成功的消息。如果不是的話，你需要的響應(yīng)代碼為500（內(nèi)部服務(wù)器錯(cuò)誤），并返回一個(gè)錯(cuò)誤消息。

需要注意一下，發(fā)送郵件需要主機(jī)的支持，也就要確保PHP開啟了 mail() 函數(shù)。

好了，到這里所有的工作都完成了。

參考自：http://blog.teamtreehouse.com/create-ajax-contact-form，如果要看更詳細(xì)的解說，請查看這篇文章。