今回は素のjavascriptを使って、Wordpressを使ったwebサイト上で、Ajaxを使ってサーバーサイド(sever.php)とのデータのやり取りする方法を紹介します。
- Ajaxを行うファイル構成を確認してみよう
- WordPressでAjaxを使うために必要な準備
- POSTでデータのやり取りをしよう
Ajaxを行うファイル構成を確認してみよう
- index.php
- script.js
- style.css
- functions.php
- functions/server.php
シンプルに同じ階層にすべてのファイルをおいています。お使いの環境に合わせてurlを変更する必要があります。
HTMLとCSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax</title>
<link rel="stylesheet" type="text/css" href="<?= esc_url(get_stylesheet_uri()); ?>">
</head>
<body>
<div class="container">
<div class="button">Ajax</div>
</div>
<script src="<?php echo esc_url(get_template_directory_uri()); ?>/script.js" defer></script>
</body>
</html>
.container {
display: flex;
justify-content: center;
width: 100%;
height: 100vh;
align-items: center;
}
.button {
padding: 1rem 2rem;
background: #ccc;
color: #fff;
cursor: pointer;
}
WordPressでAjaxを使うために必要な準備
WordPressでAjaxを使用する際には、アクセス先のurlにwp-admin/admin-ajax.phpを指定する必要があります。なので、functions.phpで予め変数ajaxurlへパスを保存させる処理を行います。
<?php
//Ajaxに必要なurlをヘッダーに表示させる
function add_ajaxurl()
{
?>
<script>
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
<?php
}
//ヘッダーで関数を実行する
add_action('wp_head', 'add_ajaxurl', 1);
// ファイルを読み込む
get_template_part('functions/server');
16:サーバー側のserver.phpを作成します。JSON形式で送られてきたデータに新たに配列を加えて、再度JSONの型に変換して送り返す内容になっています。
<?php
function push_array() {
$data = json_decode($_POST['names']);
$tanaka = array('name' => '田中');
array_push($data, $tanaka);
$data = json_encode($data);
echo $data;
die();
}
add_action( 'wp_ajax_push_array', 'push_array' );
add_action( 'wp_ajax_nopriv_push_array', 'push_array' );
POSTでデータのやり取りをしよう
const button = document.querySelector('.button');
button.addEventListener('click', function() {
var req = new XMLHttpRequest();
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
var data = JSON.parse(this.response);
console.log(data);
}
};
req.open('POST', ajaxurl, true);
req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
var names = [{
name: '佐藤'
},{
name: '鈴木'
}];
names = JSON.stringify(names);
req.send(`action=push_array&names=${names}`);
});
8〜9 通信に成功すると、サーバーサイドから送られてきたJSON型のデータを配列に変換し、ログに出力しています。
12:先程ヘッダーでajaxurl変数にurlを保存しているので、ここで指定します。
13:POSTで送信する場合は、エンティティヘッダーを用意する必要があります。
15~19今回は配列を作成し、21~22 JSON形式の型に変換して、サーバーサイド(server.php)にデータを送信します。
送信する歳には、dataのactionに先程登録した関数名を、送りたいデータの数ごとに&で連結し、データを送信することができます。
実行結果
jQueryでAjax通信をしてphpとデータのやり取りをする方法
2023年01月10日
jQuery