jQueryからAjax経由でPHPにリクエストしCookieを操作する方法
先日PHPでCookie保存時にHttpOnly / Secure属性を設定する方法をメモしたが、HttpOnly属性が設定されていると当然JavaScript / jQueryから当該Cookieは取り扱えない。ただ、Ajax経由でPHPにリクエストすれば取り扱えそう。以下にソースコードをメモ。
ソースコード
Ajax側
Ajax経由でPHPにリクエストしCookieのon / offを#result部分に反映するという内容になる。
<div id="result"> <?php if( isset($_COOKIE['test_cookie']) ){ ?> on <?php }else{ ?> off <?php } ?> </div> <button id="cookie_btn">cookie btn</button> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $(function(){ $(`#cookie_btn`).on(`click`, function(){ $.ajax({ url:'./set_cookie.php', type: 'POST', }).done(function(result){ if( result == 0 ){ $(`#result`).text(`off`); }else if( result == 1 ){ $(`#result`).text(`on`); }else{ alert('エラーが発生しました。'); } }).fail(function() { alert('エラーが発生しました。'); }).always(function() { }); }); }); </script>
受け取り側
エラーチェック等は入っていない点に注意。
<?php if( isset($_COOKIE['test_cookie']) ){ $cookie_options = array( 'expires' => time() - 3600, 'path' => '/', ); setcookie('test_cookie', '', $cookie_options); $return = 0; }else{ $cookie_options = array( 'expires' => time() + 3600, 'path' => '/', 'domain' => '', 'secure' => true, 'httponly' => true, 'samesite' => 'Lax' ); setcookie('test_cookie', true, $cookie_options); $return = 1; } echo $return;
所感
Ajax部分のソースコードが増えるのでやや面倒なものの、これでJavaScript / jQueryからもCookieを取り扱えそう。
関連記事
-
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...
-
-
jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...
-
-
画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...
-
-
FullCalendarでラベルごとに表示・非表示を切り替える方法
Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...
-
-
jQueryで画像(
タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...