如何將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 反饋,我們將盡快處理。
    ?
    購物車
    優惠劵
    搜索
    主站蜘蛛池模板: 亚洲一区二区三区高清不卡 | 一区二区网站在线观看| 亚洲综合一区二区精品导航| 久久久久成人精品一区二区| 色婷婷综合久久久久中文一区二区| 91大神在线精品视频一区| 亚洲av日韩综合一区二区三区| 国产成人一区二区在线不卡| 中文字幕一区二区三| 奇米精品视频一区二区三区| 四虎在线观看一区二区| 东京热无码一区二区三区av| 蜜桃无码AV一区二区| 日本中文字幕在线视频一区| 亚洲成AV人片一区二区密柚 | 亚洲福利视频一区二区| 亚洲AV无码一区二区三区DV| 日韩成人无码一区二区三区| 精品人妻一区二区三区毛片| 久久久精品人妻一区二区三区蜜桃 | а天堂中文最新一区二区三区| 日本在线一区二区| 国产香蕉一区二区三区在线视频| 亚洲国产成人精品久久久国产成人一区二区三区综 | 一区二区三区免费看| 无码人妻一区二区三区一| 一区二区三区日本电影| 在线欧美精品一区二区三区 | 亚洲中文字幕乱码一区| 精品国产一区二区22| 韩国一区二区三区| 乱码精品一区二区三区| 亚洲AV无码一区二区三区在线观看| 亚洲男女一区二区三区| 国产一区二区三区在线观看精品| 国产精品亚洲一区二区在线观看| 久久99精品波多结衣一区| 精品成人一区二区三区四区| 精品欧美一区二区在线观看| 日韩人妻一区二区三区蜜桃视频| 国产激情无码一区二区三区|