2017-07-30 14 views
0

在一個html文檔中,我使用這段代碼片斷來從URL獲取json。rest api ajax在html文檔中沒有輸出

<script type="text/javascript">    
     $.ajax({ 
      type: 'GET', 
      url: 'http://rest-service.guides.spring.io/greeting', 
      dataType: 'json', 
      success: function (data) { 
       document.write(data) 
      } 
     }); 
    </script> 

用document.write(data)我想在瀏覽器的html輸出中顯示它。但它只顯示「測試」。我在做什麼錯在這裏`

完整的HTML文檔:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>ServiceNow Extension</title> 
    <script src="sdk/scripts/VSS.SDK.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head> 
<body> 
    <script type="text/javascript">VSS.init();</script> 
    <h1>Test</h1> 
    <script type="text/javascript">VSS.notifyLoadSucceeded();</script> 

    <script type="text/javascript">   
     $.ajax({ 
      type: 'GET', 
      url: 'http://rest-service.guides.spring.io/greeting', 
      dataType: 'json', 
      success: function (data) { 
       document.write(data) 
      } 
     }); 
    </script> 


</body> 
</html> 
+0

嗯,你是如何調用Web服務的腳本? –

回答

0

請勿使用document.write。它清除整個頁面。只需極少的更改,您的代碼就可以工

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>ServiceNow Extension</title> 
    <script src="sdk/scripts/VSS.SDK.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head> 
<body> 
    <script type="text/javascript">VSS.init();</script> 
    <h1>Test</h1> 
    <div id="result"></div><!--Placeholder for the result--> 
    <script type="text/javascript">VSS.notifyLoadSucceeded();</script> 

    <script type="text/javascript"> 

     $.ajax({ 
      type: 'GET', 
      url: 'http://rest-service.guides.spring.io/greeting', 
      dataType: 'json', 
      success: function (data) { 
       //document.write(data) 
       //row response: {id: 76, content: "Hello, World!"} 
       //data is already parsed 
       $('#result').html(data.content); 
      } 
     }); 
    </script> 
</body> 
</html> 
0

從服務器返回的數據是一個JSON對象。當你寫它時,它只會打印一些這樣的東西[object Object]。寫這個對象寫的一些特性,例如爲下面的例子:

<script type="text/javascript">    
     $.ajax({ 
      type: 'GET', 
      url: 'http://rest-service.guides.spring.io/greeting', 
      dataType: 'json', 
      success: function (data) { 
       document.write(data.id); 
       document.write(data.content); 
      } 
     }); 
    </script> 

或者,如果你想要寫對象數據完全是作爲字符串中使用JSON.stringify()功能。

<script type="text/javascript">    
     $.ajax({ 
      type: 'GET', 
      url: 'http://rest-service.guides.spring.io/greeting', 
      dataType: 'json', 
      success: function (data) { 
       document.write(JSON.stringify(data)); 
      } 
     }); 
    </script>