html页面如何获取数据

Posted 2023-02-27

【中文标题】html页面如何获取数据

【英文标题】：How to get data into html page

【发布时间】：2021-11-13 14:06:33

【问题描述】：

var axios = require('axios')
var data = JSON.stringify( pair: 'ADA/LCX' )

var config = 
  method: 'post',
  url: 'https://exchange-api.lcx.com/order/book',
  headers: 
    'Content-Type': 'application/json',
  ,
  data: data,


axios(config)
  .then(function (response) 
    console.log(JSON.stringify(response.data))
  )
  .catch(function (error) 
    console.log(error)
  )

我想将此代码插入到 html 表中。 当我在 cmd 上运行 i 得到结果时，我必须将文件复制到我的桌面上，或者我无法将结果发送到 json 文件的 html whitout 副本？

【问题讨论】：

例如看这个教程：gawdiseattle.gitbook.io/wdi/05-node-express/00readme-1/…

【参考方案1】：

你问了一个很宽泛的问题，这里是使用 React JS 和 Fetch API 的实现，代码可能会进一步优化，可以根据你的需要进行更改。

App.js

import  useEffect, useState  from "react";
import "./styles.css";

export default function App() 
  const [buy, setBuy] = useState();
  const [sell, setSell] = useState();

  useEffect(() => 
    const pairData =  pair: "ADA/LCX" ;
    fetch("https://exchange-api.lcx.com/order/book", 
      method: "POST",
      header: "Content-Type: application/json",
      body: JSON.stringify(pairData)
    ).then(function (response) 
      response.json().then(function (data) 
        setBuy(data.data.buy);
        setSell(data.data.sell);
      );
    );
  , [buy]);

  return (
    <>
      <table className="customers">
        <tr>
          <th>Buy - Start</th>
          <th>Buy - End</th>
        </tr>
        buy
          ? Object.entries(buy).map(([make, type]) => 
              return (
                <tr>
                  <td>type[0]</td>
                  <td>type[1]</td>
                </tr>
              );
            )
          : null
      </table>
      <table className="customers">
        <tr>
          <th>Sell - Start</th>
          <th>Sell - End</th>
        </tr>
        sell
          ? Object.entries(sell).map(([make, type]) => 
              return (
                <tr>
                  <td>type[0]</td>
                  <td>type[1]</td>
                </tr>
              );
            )
          : null
      </table>
    </>
  );

Style.css

.customers 
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
  text-align: center;


.customers td,
#customers th 
  border: 1px solid #ddd;
  padding: 8px;


.customers tr:nth-child(even) 
  background-color: #f2f2f2;


.customers tr:hover 
  background-color: #ddd;


.customers th 
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #04aa6d;
  color: white;

现场演示： https://codesandbox.io/s/charming-jennings-ol4vl

【讨论】：

如果您认为这个问题过于宽泛，那么最好避免回答它。请注意，OP 没有用react 或fetch-api 标记问​​题。其实OP是专门用node.js和axios的。

他也没有nodejs标签，所以我在react中回答了它，我也不知道避免回答广泛的问题，谢谢@Boaz

我这样使用：节点 ADALCX.js > ADALCX ;;为我保存 json 输出，我需要每秒执行一次此命令以更新价格

这就是为什么我想将脚本插入到 html 表中，也许很快