如何使用 JavaScript Fetch 發送和接收數據

Question

我正在嘗試向 JS 中的外部頁面發出請求並返回數據。 這將需要等待響應，因此我認為使用 AJAX 行不通，但我可能會誤會。 我不太精通 JS，所以如果我只是想學習，請原諒我。

這是請求腳本 -

fetch('return.php', { 
    method: 'GET'
 })
 .then(function(response) { return response.json(); })
 .then(function(json) {
     obj = JSON.parse(text);
     document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + 
     obj.employees[1].lastName;
 });

然后我在返回文件中有一個 JSON 響應 -

var text = '{"employees":[' +
    '{"firstName":"John","lastName":"Doe" },' +
    '{"firstName":"Anna","lastName":"Smith" },' +
    '{"firstName":"Peter","lastName":"Jones" }]}';

每次我嘗試執行此操作時，我都會得到

Unexpected token < in JSON at position 0

我相信這意味着它沒有返回 JSON 數據，但我可能錯了。 如何在函數執行完成后向返回頁面發出請求並返回數據。

謝謝！

Answer 1

Unexpected token < in JSON at position 0強烈暗示 return.php 正在返回某種類型的 html。 嘗試導航到 return.php 以查看它返回的內容，然后進行相應的解析。

你不需要obj = JSON.parse(text); . 由於文本未定義，這將引發錯誤，但您的 fetch 調用在 response.json() 上失敗，因為響應不是 json。

Answer 2

也許這可以解決問題？ ：

fetch('return.php', {
  method: 'GET',
})
  .then((response) => {
    response.json();
  })
  .then((jsonResponse) => {
    const obj = jsonResponse;
    document.getElementById('demo').innerHTML =
      obj.employees[1].firstName + ' ' + obj.employees[1].lastName;
  });