用ajax更新一个div

时间:2019-07-14 09:41:27

标签: javascript jquery html ajax

我正在尝试使用Ajax更新ID为body { font: 32px sans-serif; color: #444; margin: 1em; width: 30%; height: 80%; border: 1px solid blue; padding: 20px; } div { border: 0.5px dotted red; padding: 10px; margin: none; } button { padding: 10px; background-color: transparent !important; border-radius: 0 !important; box-shadow: none; font-size: 16px; font-weight: 400; letter-spacing: 0.4px; /*border: none !important;*/ /*background-image: url("https://svgshare.com/i/E46.svg");*/ background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='-1.5 -.5 323 49' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg %3E%3Cpath d='M0.5,17.5326192 C0.5,21.134829 0.5,21.2157139 0.5,24.3520124 C0.5,26.6893708 8.46597491,37.9348422 13.1090932,43.0525551 C15.4600591,45.6438241 39.4446053,47.5 57.9273753,47.5 C61.5631859,47.5 61.5631859,47.5 70.4221316,47.5 C81.5195636,47.5 81.5195636,47.5 96.3478064,47.5 C130.481265,47.5 130.481265,47.5 170.584021,47.5 C211.871513,47.5 211.871513,47.5 246.64488,47.5 C261.588767,47.5 261.588767,47.5 272.461326,47.5 C276.981557,47.5 276.981557,47.5 280.178606,47.5 C282.663173,47.5 282.663173,47.5 283.620992,47.5 C289.29903,47.5 310.091972,42.3446581 315.622765,39.5788135 C317.865301,38.4573635 319.081148,33.9095947 319.408162,26.9801828 C319.548303,24.0106156 319.522522,21.0230455 319.387874,17.3717289 C319.369797,16.8815236 319.313978,15.4726684 319.310575,15.3831616 C319.286097,14.7393679 319.275069,14.3534829 319.275069,14.079734 C319.275069,13.2081444 315.100704,11.0519411 308.117483,8.31092871 C306.935674,7.84705249 305.671625,7.3636301 304.302705,6.85069851 C302.771485,6.27695358 301.186152,5.69460903 299.214559,4.97880769 C298.762445,4.81466439 295.499718,3.63387159 294.649303,3.32388632 C291.339557,2.11744935 289.744311,1.49373751 289.135173,1.13418709 C288.051185,0.494350173 265.467574,0.360897195 229.046494,0.636848595 C221.616635,0.693142366 213.785139,0.764151284 205.094422,0.851775487 C201.231941,0.890718969 197.382255,0.931029217 192.721132,0.98094912 C191.820559,0.990594125 184.181903,1.07289388 182.226924,1.09363588 C174.94256,1.17092176 171.309266,1.2036018 169.616598,1.2036018 C165.570019,1.2036018 165.570019,1.2036018 156.624478,1.2036018 C145.229455,1.2036018 145.229455,1.2036018 128.93547,1.2036018 C89.0245372,1.2036018 88.9990727,1.2036018 29.5806702,1.2036018 C26.0586592,2.89740564 23.1029239,4.49572223 20.7144439,5.99744516 C18.2932873,7.51971305 11.5600641,11.361798 0.5,17.5326192 Z' id='Button-Colour' stroke='%23EAE7EE' fill='none' vector-effect='non-scaling-stroke' stroke-width='3' %3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat !important; background-size: 100%; background-position: center !important; width: 100%; } p { padding: none; margin: none; font-size: 15px; }的{​​{1}}。 Ajax使用get请求从API检索数据,但是由于某些原因html未被更新。

这就是json数据的样子<html> <head> <title>Svg issue</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <p>Body</p> <div> <button>Svg Button</button> </div> </body> </html>

例如,我尝试将h3更改为data,但是它也不起作用。

我添加了{ticker: "TEST", Price: 7876}进行调试,数据通常显示在控制台中。

$('#data').text(data[0].data[]);

这是要更新的html部分:

$('#data').text(data[ticker].data[]);

基本上应该不是我的h3,而是每隔一秒钟更新一次我的数据,但实际上什么都没出现。

4 个答案:

答案 0 :(得分:1)

我认为您已经正确地从data[0]获取了数据; 因此,如果您想显示tickerPrice,可以这样做:

$('#data').text(data[0]["ticker"]);

价格

$('#data').text(data[0]["Price"]);

更新

N.B .:请确保您使用的数据中包含正确的属性名称,即股票行情,价格

答案 1 :(得分:1)

首先,您应该将defmodule Deep do @registry "http://registry.npmjs.org/" alias HTTPoison.Response, as: Resp def go(package, complete_deps \\ []) do HTTPoison.get(@registry <> package <> "/latest") |> handle_response() |> get_deps() end defp get_deps(nil), do: [] defp get_deps(deps), do: Enum.map(deps, fn({k, _v}) -> k end) defp handle_response({:ok, %Resp{status_code: 200, body: body}}), do: Poison.decode!(body)["dependencies"] defp handle_response(_), do: nil end 的响应转换为raw

json

然后,如果响应数据看起来像

data = JSON.parse(data);

然后,您将无法获得{ticker: "TEST", Price: 7876}之类的数据。您可以使用data[0].data获取股票行情名称,并可以使用data.ticker获取价格。

如果您的回复数据看起来像

data.price

然后您将获得类似的数据

[ { ticker: "TEST", price: 7876 } ] data[0].ticker

答案 2 :(得分:0)

要访问ajax响应,您需要解析该响应数据。

例如:data=JSON.parse(data);

现在您可以使用此数据来更改<h3>的文本

答案 3 :(得分:0)

数据看起来像一个对象数组,因此您可以调用

data[0].ticker
data[0].Price

您标记为正确的答案的价格为小写“ p”,因为JS区分大小写,因此不会返回正确的值。