如何使用jQuery顯示從數據庫獲取到HTML頁面

使用jQuery獲取示例http獲取請求從數據庫獲取json。當我執行get請求時，我從DB獲得了json數組。另外我試圖在HTML頁面中顯示json，所以我用jquery $(newData).html(data)來顯示json。但我無法看到HTML頁面中的json，<span>標籤中的單詞也消失了，我覺得它試圖顯示整個json，但它在頁面上看不到，所以需要幫助顯示json數據。頁。如何使用jQuery顯示從數據庫獲取到HTML頁面

<!DOCTYPE html> 
<html> 
<head> 
    <title>Http Get Method</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("button").click(function(){ 
       $.get("http://citibikenyc.com/stations/json",function(data, status){ 

         $("#newData").html(data); 

       }); 
      }); 
     }); 

    </script> 
    <!-- <link rel="stylesheet" type="text/css" href="getMethod.css"/> --> 
</head> 
<body> 
<button> Get </button> 
<span id="newData"> 
DISPLAY THE RESULT 
</span> 
</body> 
</html>

來源

2017-04-05 sree

請創建一個工作示例，以便我相應地爲您提供幫助。 –

您可以得到如下所述的數據。

var data = '{"id": 1,"name": "test"}'; 
var json = JSON.parse(data); 
alert(json["name"]); 
alert(json.name);

來源

2017-04-05 08:30:14

您的文字DISPLAY THE RESULT正在消失，因爲你正在使用.html該設置將選擇查詢的內容，即它取代，如果有任何的任何數據。

因此，您應該使用.append()函數代替追加到選定查詢中的現有數據。

你忘記了你得到的數據是JSON格式，你不能直接附加到頁面，一般你想以表格格式或類似的東西顯示，無論如何只是爲了顯示數據在將其追加到html頁面之前，您正在直接使用data = JSON.stringify(data)。

與

$("#newData").append(JSON.stringify(data));

來源

2017-04-05 08:38:03 warl0ck

替換行

$("#newData").html(data);

請嘗試我的解決方案，讓我..通過使用JSONP

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Http Get Method</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 
     $(document).ready(function(){ 
 
     
 
      $("button").click(function(){ 
 
        $.ajax({ 
 
         url: "http://citibikenyc.com/stations/json", 
 
         type: "GET", 
 
         dataType: 'jsonp', 
 
         success: function (data, status, error) { 
 
          console.log(data); 
 
          data = JSON.stringify(data); 
 
          $("#newData").html(data); 
 
         }, 
 
         error: function (data, status, error) { 
 
          console.log('error', data, status, error); 
 
          data = JSON.stringify(data); 
 
          $("#newData").html(data); 
 
         } 
 
       }); 
 
      }); 
 
     }); 
 

 
    </script> 
 
    <!-- <link rel="stylesheet" type="text/css" href="getMethod.css"/> --> 
 
</head> 
 
<body> 
 
<button> Get </button> 
 
<span id="newData"> 
 
DISPLAY THE RESULT 
 
</span> 
 
</body> 
 
</html>

來源

2017-04-05 08:53:14

此錯誤即將發佈，因爲stackoverflow拒絕從其控制檯加載其他網址數據，儘管它可以在本地機器上正常工作 – warl0ck

感謝您的信息:-) –

如何使用jQuery顯示從數據庫獲取到HTML頁面

回答

相關問題