JS fetch 取資料的小問題 (已解決)

js fetch php

phantom_0 2022-12-19 12:56:23 ‧ 653 瀏覽

分享至

我的後端
輸出兩個div

back.php

<?php
    echo "<div>aaa</div>";
    echo "<div>bbb</div>";
?>

我的前端要去抓兩個div 然後用 doucment.write 插入DOM

<script type="text/javascript">
	

async function get(){
        //get請求
		let data = await fetch("./back.php");
		data = await data.text();

        //印出 <div>aaa</div><div>bbb</div>
		console.log(data);
        
        //印出 string 
		console.log(typeof(data));
        
        //回傳 data 為一個 string  
		return data;

}

data = get();

// 這行顯示是一個[object Promise]  
document.write(data);
</script>

我在函數返回的 return data是 string
但我 document.write(data) 它又變promise 所以失敗

我想問我要如何把它單純類似已下效果

document.write("<h2>Hello World!</h2><p>Have a nice day!</p>");

另外一個問題:
基本上我的後端就想這樣輸出，我想問我這樣取 html tag 的思路是各位常用的嗎，還是有其他更好方法 ?

謝謝。

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2022-12-19 13:51:37 檢舉

> 基本上我的後端就想這樣輸出，我想問我這樣取 html tag 的思路是各位常用的嗎，還是有其他更好方法 ?

不是，沒人動不動就重寫整個DOM tree的。

淺水員 iT邦大師 6 級 ‧ 2022-12-19 15:16:33 檢舉

async function 回傳的永遠都是 Promise

re.Zero iT邦研究生 5 級 ‧ 2022-12-19 19:34:05 檢舉

推薦:「Async function / Await 深度介紹」
https://www.casper.tw/development/2020/10/16/async-await/
(當初 async, await 出來時，我就覺得能搞死一堆沒 promise 概念的新手；因為我也被搞過～)

至於怎樣輸出，是看你的設計內容，我倒覺得你方便就好；頂多打掉重練～
但，該注意的要注意喔(例如資安風險)。

phantom_0 iT邦新手 5 級 ‧ 2022-12-19 23:03:02 檢舉

請問是哪一種類型的資安風險我學過一些基本的漏洞知識，是源代碼洩漏嗎

re.Zero iT邦研究生 5 級 ‧ 2022-12-20 02:47:18 檢舉

命令注入(Command injection)、機要資訊寫在可供外部存取的程式碼內，我臨時想到也就這樣～(其他應該還有，但我都是寫到啥才想到啥～)

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

froce

iT邦大師 1 級 ‧ 2022-12-19 14:09:57

<?php
    echo "<div id='a'>aaa</div>";
    echo "<div id='b'>bbb</div>";
?>

<script type="text/javascript">
	
const a = document.getElementById('a')

async function get(){
        //get請求
		let data = await fetch("./back.php");
		data = await data.text();

        //印出 <div>aaa</div><div>bbb</div>
		console.log(data);
        
        //印出 string 
		console.log(typeof(data));
        
        //回傳 data 為一個 string  
		return data;

}

get.then((data)=>{
    // 這會有資安隱憂，慎用，尤其是如果你資料是從資料庫取出來的話
    a.after(data)
})

</script>

回應 2
分享
檢舉

re.Zero iT邦研究生 5 級 ‧ 2022-12-19 19:27:35 檢舉

你後面的

get.then((data)=>{

我看了好久，一直覺得怪怪的；回過神來才發現，那邊應該是:

get().then((data)=>{

我就一手拿著杯子呆了好一陣子……癡呆症了我……

froce iT邦大師 1 級 ‧ 2022-12-20 07:53:04 檢舉

漏掉了...

登入發表回應

企鵝大叔

iT邦新手 5 級 ‧ 2022-12-21 17:05:55

個人建議, 後端主要傳資料給前端就好, 盡可能不要連 html 都帶到回傳

寫法一

<script type="text/javascript">
async function get(){
  // get請求
  var fetch = await fetch("./back.php");
  return await data.text();
}

data = await get();
document.body.innerHTML = data;
<script>

寫法二

<script type="text/javascript">
fetch("./back.php")
    .then(function(data) => {
        document.body.innerHTML = data;
    })
    .catch(function(error) => {
        console.error(error);
    });
<script>