如何使用 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;
  });