勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryからAjax経由でPHPにリクエストしCookieを操作する方法

  PHP jQuery JavaScript

先日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を取り扱えそう。

 - PHP jQuery JavaScript

  関連記事

jQselectableでセレクトボックスをリッチにする

入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...

jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法

GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...

JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法

ページを開いた際に指定したテキストボックス(input type="text") ...

jQueryで偶数or奇数行に任意のClassを付与する方法

tableタグの1行目を除く偶数もしくは奇数行のtrタグに任意にClassを指定 ...

jQuery UIを用いた日付及び時間のピッカーの利用方法

jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...