---
# System prepended metadata

title: 如何使用 jQuery ajax() 方法 取得資料
tags: [jQuery]

---

- [可參考資源](https://www.runoob.com/jquery/ajax-ajax.html)

### 資料夾目錄:

![image](https://hackmd.io/_uploads/By75ccUwp.png)




### 語法:

- 設定一個按鈕，當我 click 時，則可以透過 JavaScript 獲取 JSON 資料。

```html
    <h1>捕獲JSON練習</h1>
    <button class="getData">get data</button>
```

- **JavaScript 代碼**:

```js
const getData = document.querySelector(".getData");

getData.addEventListener(
  "click",
  (e) => {
      // 語法在這:  'test.json' -> 為你的目標路徑資料
    $.getJSON("test.json", function (json) {
      console.log(json);
    });
  },
  false
);


// console output:
```
![image](https://hackmd.io/_uploads/rJ0J3qUDT.png)
