如何使用 JavaScript Fetch 发送和接收数据

Question

I am trying to make a request to an external page in JS and return the data. This will need to await a response so using AJAX I dont think will work but I may be mistaken. I am not well versed in JS so forgive me if im way off here just trying to learn.

Here is the request script -

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;
 });

Then I have a JSON response in the return file -

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

Everytime I try and execute this I get

Unexpected token < in JSON at position 0

Which I believe means it is not returning JSON data but I may be wrong. How can I make a request to the return page and return data when its finished with the function execution.

Thanks!

Answer 1

Unexpected token < in JSON at position 0 strongly implies that return.php is returning html of some kind. Try navigating to return.php to see what it's returning, and then parse accordingly.

You do not need obj = JSON.parse(text); . This will throw an error as text is not defined, but your fetch call is failing on response.json(), as the response is not json.

Answer 2

maybe this fixes things? :

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;
  });