Question

我正在学习Javascript / API调用，并且在获取时遇到了麻烦。当我从myFunction调用fetch函数时，它什么也没做（我可以看到），但是如果我从myFunction中取出它，它将显示我期望的错误消息。

我尝试使用Google进行搜索，但是没有找到任何对我有帮助的信息。我添加了console.log语句以确保正在调用该函数。

我尝试从函数中取出fetch语句，而是将其作为脚本放在html文件中。那就很好了。但是我想使用javascript文件中的函数的函数名来调用它，我想了解为什么它现在不能正常工作。我认为这与函数退出之前未返回获取有关，但我不确定。

javascript函数：

function myFunction(){


    fetch('https://sickw.com/api.php?format=html&key=SOME_KEY&imei=12908438754328705&service=999999')
      .then(response => response.text())
      .then(data => {
        //document.write(data)
        console.log(data)
      });

    //make sure the function was called
    console.log("hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii");
}

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Ghibli App</title>

  <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <div id="root"></div>

  <form>
    <select id="carrier">
      <option value="carrier">Carrier</option>
      <option value="icloud">iCloud</option>
    </select>
    <button onClick="myFunction('carrier');">Submit</button>"
  </form>

  <script src="scripts.js"></script>
</body>

</html>

我希望看到一个页面，上面显示“错误S01：服务ID错误！”但是，当我从myFunction（）调用代码时，页面根本没有改变。

Answer 1

为什么您什么都看不到：

问题不在于您从函数内部调用fetch，而是在表单中按钮的onclick内调用该函数。

将<button>元素放置在<form>元素内时，其默认行为是提交表单（将结果发布到其他网页上并在浏览器中加载该新页面）。由于您的表单没有action属性，因此它将仅重新加载当前页面。重新加载当前页面导致您看不到任何结果。

解决了 first 问题：

为防止表单返回，您需要在传递给函数的事件上调用preventDefault()：

function myFunction(event){
    event.preventDefault();

    fetch('https://sickw.com/api.php?format=html&key=SOME_KEY&imei=12908438754328705&service=999999')
      .then(response => response.text())
      .then(data => {
        //document.write(data)
        console.log(data)
      });

    //make sure the function was called
    console.log("hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii");
}

第二期

但是，由于调用此函数的方式（将其传递到HTML元素的onclick方法），您无权访问该事件。为了解决这个问题，您应该使用addEventListener方法，如下所示：

document.getElementsByTagName("button")[0].addEventListener("click", myFunction);

如果为按钮提供ID，则可以将其替换为：

document.getElementById("button-id").addEventListener(...)

第三期

您正在将'carrier'直接传递给函数，但是我的猜测是您想从<select>元素中读取值。为此，您应该使用document.getElementById和.value来读取选择内容：

var carrier = document.getElementById("carrier").value;

完成此操作后，您可以在carrier请求中使用fetch

第四期

正如其他人在评论中已经提到的那样，您应该避免调用document.write。有很多关于它为什么不好的书，但是正确的答案是使用DOM API修改页面上的元素。例如：

var p = document.createElement("p");
p.innerHTML = data;
document.appendChild(p);

最终代码

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Ghibli App</title>

  <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <div id="root"></div>

  <form>
    <select id="carrier">
      <option value="carrier">Carrier</option>
      <option value="icloud">iCloud</option>
    </select>
    <button id="button-id">Submit</button>"
  </form>

  <script src="scripts.js"></script>
</body>

</html>

script.js

function myFunction(event){
    event.preventDefault();
    var carrier = document.getElementById("carrier").value;
    fetch('https://sickw.com/api.php?format=html&key=SOME_KEY&imei=12908438754328705&service=999999&carrier=' + carrier)
      .then(response => response.text())
      .then(data => {
          var p = document.createElement("p");
          p.innerHTML = data;
          document.appendChild(p);
      });
}

document.getElementById("button-id").addEventListener("click", myFunction);

为什么只在不在函数中时才执行获取？

1 个答案:

为什么您什么都看不到：

解决了 first 问题：

第二期

第三期

第四期

最终代码