我在練習javascript的Ajax，我用axios出現問題，不知道該怎麼解決?

ajax javascript axios

帥帥大阿湯 2023-06-30 21:33:52 ‧ 1812 瀏覽

分享至

各位大大好!我在練習Javascript中ajax的axios，我把程式碼和json檔放在同一個資料夾，沒有放在server端，在vscode撰寫程式碼，但我貼上axios的cdn後，用go live執行，google chrome上渲染，結果出現錯誤，該怎麼辦呢?Json檔案格式錯誤嗎?

vscode編輯器上照片:

google chrome上渲染照片:

檔案夾照片:

json檔案如下:

[
	{
		"name":"David",
		"age":"27",
		"chin":"83",
		"eng":"76",
		"math":"91"
	},
	{
		"name":"Amy",
		"age":"18",
		"chin":"77",
		"eng":"93",
		"math":"65"
	}
]

程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascrip ajax Axios get 1</title>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js" integrity="sha512-uMtXmF28A2Ab/JJO2t/vYhlaa/3ahUOgj1Zf27M5rOo8/+fcTUVH0/E0ll68njmjrLqOBjXM3V9NiPFL5ywWPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
    <!--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

    <button onclick="show();">連線取得資料</button>
	<div id="result"></div>
	<script>

		function show() {
            
               
                axios.get("/json/student.json").then(function(response){
                    let result=document.querySelector("#result");
                    for(let i=0;i<data.length;i++){
                        let stu=data[i];
                        result.innerHTML+="學生姓名:"+stu.name+
                                        "<br>學生年齡:"+stu.age+
                                        "<br>國文成績:"+stu.chin+
                                        "<br>英文成績:"+stu.eng+
                                        "<br>數學成績:"+stu.math+"<br>";
                    }
                });
            
		}
		
	</script>
</body>
</html>

錯誤訊息如下:

Live reload enabled.
jquery-3.4.1.min.js:2 Error: <path> attribute d: Expected number, "…               tc0.2,0,0.4-0.2,0…".
xe @ jquery-3.4.1.min.js:2
content.js:1 Uncaught DOMException: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.
    at Content.isSelection (chrome-extension://bebmphofpgkhclocdbgomhnjcpelbenh/scripts/content.js:1:18131)
    at Content.handleSelection (chrome-extension://bebmphofpgkhclocdbgomhnjcpelbenh/scripts/content.js:1:17817)
axios1.html:22 Uncaught (in promise) ReferenceError: data is not defined
    at axios1.html:22:35
DevTools failed to load source map: Could not load content for chrome-extension://mnlohknjofogcljbcknkakphddjpijak/js/lib/purify.min.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://cofdbpoegempjloogbagkncekinflcnj/build/content.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

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

froce iT邦大師 1 級 ‧ 2023-06-30 23:16:59 檢舉

前面兩個有點莫名奇妙，都是jQuery的問題，但axios 是沒用到的
最後一個是你寫錯了，data 這個變數你有定義過嗎？

另外學著看debug

帥帥大阿湯 iT邦新手 4 級 ‧ 2023-07-01 11:07:33 檢舉

好的，我去定義data變數，謝謝妳，因為我沒看過哪些debug，所以才請教各位大大。

greenriver iT邦研究生 4 級 ‧ 2023-07-03 08:39:15 檢舉

首先，要先定義data。
像rain_yu大大說的那樣，let data=response.data。
因為這是axios本身定義的，會將收到的資料放到response.data裡。
ps. 雖然不影響axios的結果，但你的json格式是錯的。
要像這樣:
{
"data":[....]
}

帥帥大阿湯 iT邦新手 4 級 ‧ 2023-12-14 22:11:45 檢舉

謝謝妳!

登入發表討論

直播研討會

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

直播中

1 個回答

rain_yu

iT邦研究生 5 級 ‧ 2023-07-03 08:19:29

要正確地發送AJAX，你可以按照以下步驟進行修改：

調整script標籤中引入的axios庫的路徑，目前使用的是unpkg的CDN，可以確保庫的正確加載，如果你想使用本地庫，可以將路徑修改為庫的本地路徑。
將axios.get的URL引號括起來。目前的代碼中，URL沒有被引號括起來，這會導致語法錯誤。你可以將URL修改為字串，例如axios.get('/json/student.json')。
在then方法中，將response.data賦值給data變量。在之前的代碼中，data變量並沒有被定義，這導致循環無法運行。你可以將axios.get的回調函數修改為function(response)，然後將response.data賦值給data變量，例如let data=response.data。
在循環中，將stu變量改為response.data[i]，這樣才能正確地訪問每個學生的屬性。
在innerHTML中，將+號前後的字符串用引號括起來，例如'學生姓名:'+stu.name+''。

修改後的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascrip ajax Axios get 1</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

    <button onclick="show();">連線取得資料</button>
    <div id="result"></div>
    <script>

        function show() {
            axios.get('/json/student.json').then(function(response){
                let result=document.querySelector('#result');
                let data=response.data;
                for(let i=0;i<data.length;i++){
                    let stu=data[i];
                    result.innerHTML+="學生姓名："+stu.name+"<br>"+
                                    "學生年齡："+stu.age+"<br>"+
                                    "國文成績："+stu.chin+"<br>"+
                                    "英文成績："+stu.eng+"<br>"+
                                    "數學成績："+stu.math+"<br>";
                }
            });
        }

    </script>
</body>
</html>