第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

獲取 JSON 并顯示 HTML 表

獲取 JSON 并顯示 HTML 表

蝴蝶不菲 2024-01-18 20:44:08
這就是我正在嘗試做的事情。我創(chuàng)建了一個帶有表格的 HTML 頁面。我定義了除正文標簽之外的所有標簽。我有一個 javascript,它以 JSON 格式從網(wǎng)絡獲取數(shù)據(jù),對其進行解析,然后使用innerHTML 將元素寫入帶有標簽的表體。如果你讓它運行,它就會完美地工作。但是,如果我將此“獲取”代碼放入函數(shù)中并從“提交”按鈕的“onclick”執(zhí)行此函數(shù),則邏輯將停止工作。我在函數(shù)的開頭放置了一個警報,我可以看到它,但獲取部分不起作用。我嘗試使用常規(guī)函數(shù)和異步(等待)。兩者都不起作用。這是我的代碼(從表單開始)。請讓我知道我做錯了什么。謝謝。<form enctype="multipart/form-data" action="" method="post">    <button type="submit" name="submit" id="Submit" value="click" onClick = getEarnings()>Click </button></form><table>  <thead>    <tr">        <th>Reported Date</th>        <th>Reported EPS</th>        <th>Estimated EPS</th>        <th>Surprise</th>    </tr>  </thead>  <tbody id="myData"><tbody></table><script>/* function getEarnings() { */    fetch('https://www.alphavantage.co/query?function=EARNINGS&symbol=IBM&apikey=demo')      .then(res => res.text())      .then((out) =>         {            alert("I am here"); // I can't see it if from function            let jsonData = JSON.parse(out);            for (let i = 0; i < jsonData.quarterlyEarnings.length; i++)             {                let earnings = jsonData.quarterlyEarnings[i];                document.getElementById("myData").innerHTML +=                "<tr><td>" + earnings.reportedDate + "</td>" +                "<td align='right'>" + earnings.reportedEPS + "</td>" +                "<td align='right'>" + earnings.estimatedEPS + "</td>" +                "<td align='right'>" + earnings.surprise + "</td></tr>";             };         })      .catch(err => console.error(err));/* } */</script>
查看完整描述

3 回答

?
肥皂起泡泡

TA貢獻1829條經(jīng)驗 獲得超6個贊

您不需要表單來獲取數(shù)據(jù)。我的建議:


getData.onclick = () => {

  fetch('https://www.alphavantage.co/query?function=EARNINGS&symbol=IBM&apikey=demo')

    .then(res => res.text())

    .then((out) => {

      let jsonData = JSON.parse(out);

      for (let i = 0; i < jsonData.quarterlyEarnings.length; i++) {

        let earnings = jsonData.quarterlyEarnings[i];

        myData.innerHTML +=

          "<tr><td>" + earnings.reportedDate + "</td>" +

          "<td align='right'>" + earnings.reportedEPS + "</td>" +

          "<td align='right'>" + earnings.estimatedEPS + "</td>" +

          "<td align='right'>" + earnings.surprise + "</td></tr>";

      };

    })

    .catch(err => console.error(err));

}

<button type="button" id="getData">Get data</button>

<table>

  <thead>

    <tr>

      <th>Reported Date</th>

      <th>Reported EPS</th>

      <th>Estimated EPS</th>

      <th>Surprise</th>

    </tr>

  </thead>

  <tbody id="myData">

    <tbody>

</table>


查看完整回答
反對 回復 2024-01-18
?
UYOU

TA貢獻1878條經(jīng)驗 獲得超4個贊

當您單擊標簽中的按鈕時,您的頁面將刷新,您應該像這樣避免這種情況


const getEarnings = (e) => {

// prevent browser from refreshing

e.preventDefault()


fetch()


}


查看完整回答
反對 回復 2024-01-18
?
德瑪西亞99

TA貢獻1770條經(jīng)驗 獲得超3個贊

一些東西:

  1. 使用“onclick”而不是“onClick”(參見底部的注釋)

  2. 在引號內(nèi)設置對 HTML 屬性的調(diào)用,如下所示:onClick="getEarnings();"

  3. 停止事件傳播,因為您的按鈕是提交類型并將強制頁面重新加載。這可以通過幾種方式完成:

    • 您可以將按鈕類型設置為“按鈕”而不是“提交”,因為后者會強制頁面重新加載。

    • 您可以將事件接受到函數(shù)中,然后停止事件繼續(xù),如下所示:

function getEarnings (e) {

    // This will stop a submit button from reloading the page

    e.preventDefault();

    // Logic here

}

理想情況下,您應該將此邏輯完全放在腳本中,其中您的按鈕具有唯一的id,您可以在 DOM 加載時定位并在其上設置事件偵聽器。這樣您就可以將所有這些移動到一個單獨的文件中,并將表示和邏輯分開。在我的腦海中,它會是這樣的:


window.addEventListener('DOMContentLoaded', function () {

    const submit = document.getElementById('Submit');

    submit.addEventListener('click', function (e) {

       e.preventDefault();

       // run logic

    });

});

筆記:


查看完整回答
反對 回復 2024-01-18
  • 3 回答
  • 0 關注
  • 222 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號