MENU
  • ホーム
  • エンジニア技術MEMO
  • デザインチーム
    • webコーダー挑戦
    • Webデザイナ挑戦デザイナーがWebデザイナーに挑戦し、コーディングやデザインマターでの困りごとや調査内容、他の専門家との情報交換等を投稿します。
    • WordPressWordpressのサイト構築あれこれ!
    • コーダー技術MEMO
    • デザインチーム
  • IT TOOL
    • ECサイトIT TOOL ECサイト
    • レッスン施術サービスレッスン施術サービス予約サイト
    • 美容院予約美容院予約システム
    • 会議室予約
    • 家事代行予約
    • 求人サイト
    • 発注・請求システム
  • IT導入補助金
  • 電気自動車(EV)
  • FAQ
  • どこの国
  • 業務効率化
    • 見積
    • 請求
  • ホーム
  • エンジニア技術MEMO
  • デザインチーム
    • webコーダー挑戦
    • Webデザイナ挑戦デザイナーがWebデザイナーに挑戦し、コーディングやデザインマターでの困りごとや調査内容、他の専門家との情報交換等を投稿します。
    • WordPressWordpressのサイト構築あれこれ!
    • コーダー技術MEMO
    • デザインチーム
  • IT TOOL
    • ECサイトIT TOOL ECサイト
    • レッスン施術サービスレッスン施術サービス予約サイト
    • 美容院予約美容院予約システム
    • 会議室予約
    • 家事代行予約
    • 求人サイト
    • 発注・請求システム
  • IT導入補助金
  • 電気自動車(EV)
  • FAQ
  • どこの国
  • 業務効率化
    • 見積
    • 請求
  • ホーム
  • エンジニア技術MEMO
  • デザインチーム
    • webコーダー挑戦
    • Webデザイナ挑戦デザイナーがWebデザイナーに挑戦し、コーディングやデザインマターでの困りごとや調査内容、他の専門家との情報交換等を投稿します。
    • WordPressWordpressのサイト構築あれこれ!
    • コーダー技術MEMO
    • デザインチーム
  • IT TOOL
    • ECサイトIT TOOL ECサイト
    • レッスン施術サービスレッスン施術サービス予約サイト
    • 美容院予約美容院予約システム
    • 会議室予約
    • 家事代行予約
    • 求人サイト
    • 発注・請求システム
  • IT導入補助金
  • 電気自動車(EV)
  • FAQ
  • どこの国
  • 業務効率化
    • 見積
    • 請求
  1. ホーム
  2. webコーダー挑戦
  3. phpからjQueryへ配列データを引き渡す方法【smarty】【Laravel】【javascript】

phpからjQueryへ配列データを引き渡す方法【smarty】【Laravel】【javascript】

2024 6/10
webコーダー挑戦 エンジニア技術MEMO
2024年6月10日

こんにちは、コーダーのオッコです。

本日は、php側で用意したデータをjqueryで使いたいときの引き渡し方法を紹介します。

目次

前提

使用フレームワーク

・バック:Laravel  フロント:smarty、jQuery

やりたいこと

・Controller側で用意した配列を、jqueryで使いたい

まず単純なテキストデータの引き渡し方

//controller側 普通にviewに値を引き渡す
$hoge= "ほげ";
$fuga = 1000;
$this->view->assign('hoge', $hoge);
$this->view->assign('fuga', $fuga);


//js側
<script>
(function() {
    var hoge = '{$hoge}', // hoge = 'ほげ'
        fuga = {$fuga};   // fuga = 1000
});
</script>

tplファイルの中にjavascriptを直書きする方法です。

単純なデータならこれでいけます。

私の場合、同じように配列を渡してみたところ、何も入ってくれませんでした。

配列データの渡し方

//controller側 普通にviewに値を引き渡す
$hairetsu= [001,002,003];
$hairetsu = json_encode($hairetsu);
$this->view->assign('hairetsu', $hairetsu);


//js側
<script>
(function() {
    var hairetsu = {$hairetsu};   // hairetsu = [001,002,003]; hairetsu[1] = 002;
});
</script>

配列の場合は、jsonにエンコードし、テキスト状態にしてから引き渡します。

※配列内に文字列があると「”」でエラーが出たので、何かもう一工夫必要なようです。

以上です。

参考

https://rythgs.co/archives/2014/06/02/pass-value-to-js-from-smarty

https://www.sejuku.net/blog/23004

https://www.sejuku.net/blog/33613

D-NET
[Smarty]変数・配列を定義する(assign) - D-NET テンプレート内で変数・配列を定義する方法。assignの中で変数と変数を結合する方法。カウントの定義の仕方。配列の定義方法の参考例。
↑tpl内で配列を定義する方法も試みたのですが、プラグインが必要とのことで今回は別の手法を採用しました。※smarty3ならいけそう

https://www.tohoho-web.com/ex/json.html

[cc id=1656]

webコーダー挑戦 エンジニア技術MEMO
controller javascript jQuery laravel コーディング 値渡し
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • 【公開鍵暗号方式とは】公開鍵と秘密鍵をざっくり分かりやすく説明してみる【public key】【private key】
  • デザイナー必須「LP」の構成・デザイン① アピス

この記事を書いた人

オッコのアバター オッコ

関連記事

  • WordPressサイト自動更新が無効化されている場合の設定を解除する方法とは?
    2025年1月15日
  • 【公開鍵暗号方式とは】公開鍵と秘密鍵をざっくり分かりやすく説明してみる【public key】【private key】
    2024年6月6日
  • LINE内で使うアプリ開発のために、LIFFを試す(スターターキットを立ち上げてみる)
    2024年3月14日
  • git管理下でsourcetreeとmonacaを併用してハイブリッドアプリの開発をする【Vue.js】~環境構築とクラウド反映確認~
    2024年3月5日
  • hタグおさらい
    SEO検索に必要な「hタグ」のおさらい
    2024年2月9日
  • monaca×Vue.jsをローカルでトランスパイルする際、最初にインストールするもの(notエンジニア向け)
    2023年12月26日
  • npmでNode.jsのmoduleをインストールできなかったときに見たエラー文たち
    2023年12月14日
  • リンクが効かない原因
    2023年12月13日

コメント

コメントする コメントをキャンセル

カテゴリー

  • ECサイト
  • IT TOOL
  • IT導入補助金
  • monaca
  • PC関連
  • Shopify
  • webコーダー挑戦
  • Webデザイナ挑戦
  • Web制作
  • Wordpress
  • アパレル
  • エクセル・ワード
  • エンジニア技術MEMO
  • お知らせ
  • コーダー技術MEMO
  • スマートガジェット
  • セキュリティ
  • セルフオーダーシステム
  • デザインチーム
  • どこの国
  • ネットで販売
  • ブログ
  • ブログ
  • ブログ収益化
  • プロンプト
  • マーケティング
  • レッスン施術サービス
  • 会議室予約
  • 回線・インターネット
  • 家事代行予約
  • 未分類
  • 業務効率化
  • 画像生成AI
  • 発注・請求システム
  • 社内用
  • 社長
  • 美容院予約
  • 見積
  • 見積
  • 請求
  • 電気自動車(EV)

最近の投稿

  • 100記事書いてもアクセスが増えない?記事リライト後の測定のコツとアクセス数の目安を解説
  • ブログアクセス数が目安に届かない…100記事書いたのにアクセスが増えない人の改善ステップ
  • 100記事書いてもアクセスが増えない?記事リライトのコツとアクセス数の目安を解説
  • 初心者向け:なぜ記事が “表示回数0” のまま放置されるのか?実例で学ぶSEO改善の基本
  • SWELLテーマで埋め込み(oEmbed)がうまくいかない?原因と対処法まとめ

最近のコメント

  1. Elementor Pro ライセンス・更新について に wpmaster より
  2. Elementor Pro ライセンス・更新について に 志村和久 より

アーカイブ

  • 2025年5月
  • 2025年4月
  • 2025年3月
  • 2025年2月
  • 2025年1月
  • 2024年12月
  • 2024年11月
  • 2024年9月
  • 2024年8月
  • 2024年7月
  • 2024年6月
  • 2024年4月
  • 2024年3月
  • 2024年2月
  • 2024年1月
  • 2023年12月
  • 2023年11月
  • 2023年10月
  • 2023年8月
  • 2023年7月
  • 2023年6月
  • 2023年5月
  • 2023年4月
  • 2023年3月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月

APICE

問い合わせ

アピステクノロジー|tec note

  • ホーム
  • エンジニア技術MEMO
  • デザインチーム
    • webコーダー挑戦
    • Webデザイナ挑戦
    • WordPress
    • コーダー技術MEMO
    • デザインチーム
  • IT TOOL
    • ECサイト
    • レッスン施術サービス
    • 美容院予約
    • 会議室予約
    • 家事代行予約
    • 求人サイト
    • 発注・請求システム
  • IT導入補助金
  • 電気自動車(EV)
  • FAQ
  • どこの国
  • 業務効率化
    • 見積
    • 請求

 〒224-0032 神奈川県横浜市都筑区茅ケ崎中央42−21 第2佐藤ビル 203

電話番号: 045-532-4480

お問い合せ

© .

目次