如何將PHP的變量傳給js?

    在vue文件中,通過axios來遠程調用PHP產出的內容。

    在實際開發中,我們常常需要用到PHP產出的數據,通過JS調用來在前臺處理。

    方法一:內嵌法

    在php文件里面寫JS內容,直接傳,案例如下:

    <?php
    //構造鏈接
    $wx_url = "http://www.kartiktrivedi.com/";
    ?>
    
    <button onclick="openWeapp()">點擊跳轉小程序哦</button>
    
    
    <script>
    
    var urlscheme= "<?php echo $wx_url ?>";
    
        function openWeapp() {
            //window.alert(1);
            location.href = urlscheme;
        }
    </script>
    
    

    如您所見,這樣并不優雅。

    方法二:Axios獲取

    php輸出數組,我們使用Axios遠程獲取即可。

    新建test.php文件,輸入以下代碼

    <?php
    header('Content-Type:application/json');//加上這行,前端那邊就不需要var result = $.parseJSON(data);
    $retdata = array(
    "student"=>array("name"=>"feiq","sex"=>"male","age"=>18,"job"=>'agineer'),"superstar"=>array("name"=>"MM","sex"=>"female","age"=>20,"job"=>'signer')
    );
    echo json_encode($retdata);
    ?>
    
    

    新建index.html,調用PHP的內容

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>從php文件中異步獲取json數據</title>
        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
    <div id="myphp">
    <p>從php文件中讀取json數據</p>
        <ol>
            <li>名字</li>
            <li v-for="sites in info">{{sites.name}}</li>
        </ol>
        <ol>
            <li>性別</li>
            <li v-for="sites in info">{{sites.sex}}</li>
        </ol>
        <ol>
            <li>年齡</li>
            <li v-for="sites in info">{{sites.age}}</li>
        </ol>
        <ol>
            <li>職業</li>
            <li v-for="sites in info">{{sites.job}}</li>
        </ol>
    </div>
      <script>
        const App = Vue.createApp({
          data() {
            return {
              info: [],
            }
          },
          mounted() {
            axios
              .get('test.php')
              .then(response => {
                console.log(response);
                this.info = response.data;
              })
              .catch(function (error) {
                alert(error)
              })
          }
        })
        App.mount("#myphp")
      </script>
    </body>
    </html>

    其中的test.php,一般長這樣

    http://www.kartiktrivedi.com/test/test.php

    注意

    跨域問題涉嫌安全,請小心。

    相關推薦

    如何處理并拿到需要的JSON數據 – PHP

    Axios溝通前后端 – Vue3

    參考文章

    給TA贊賞
    共{{data.count}}人
    人已贊賞
    ??
    Npcink上的部份代碼及教程來源于互聯網,僅供網友學習交流,若您喜歡本文可附上原文鏈接隨意轉載。
    無意侵害您的權益,請發送郵件至 1355471563#qq.com 或點擊右側 私信:Muze 反饋,我們將盡快處理。
    ?
    購物車
    優惠劵
    搜索
    主站蜘蛛池模板: 麻豆一区二区99久久久久| 国产成人无码精品一区二区三区| 久久精品无码一区二区无码| 精品人妻少妇一区二区三区不卡| 精品无码中出一区二区| 免费一区二区无码东京热| 国产一区二区好的精华液| 久久久久人妻精品一区蜜桃| 国产91精品一区| 国产精品无码一区二区三区不卡| 精品一区二区三区在线观看视频| 亚洲av午夜精品一区二区三区| AV天堂午夜精品一区二区三区| 一区 二区 三区 中文字幕| 国产精品综合一区二区| 亚洲午夜日韩高清一区 | 中文字幕aⅴ人妻一区二区| 日韩精品一区二区亚洲AV观看| 一区二区三区精密机械| 国产一区二区三区福利| 亚洲熟女一区二区三区| 国产精品一区二区毛卡片| 蜜桃视频一区二区三区| 亚洲一区中文字幕久久| 国产熟女一区二区三区五月婷| 日韩制服国产精品一区| 日韩一区二区三区射精| 国产午夜精品一区理论片飘花| 亚洲AV无码一区二区三区牲色| 日本精品夜色视频一区二区| 亚洲免费一区二区| 国产经典一区二区三区蜜芽| 一区五十路在线中出| 国产91久久精品一区二区| 插我一区二区在线观看| 国模一区二区三区| 亚洲综合一区二区| 亚洲色精品aⅴ一区区三区| 精品在线视频一区| 伊人色综合视频一区二区三区 | 中文人妻无码一区二区三区|