Fetch API Get 请求无法识别输入表单中的值答案

【问题标题】：Fetch API Get request not recognizing values from input formFetch API Get 请求无法识别输入表单中的值
【发布时间】：2021-07-02 11:55:53
【问题描述】：

我正在尝试使用来自具有玩家名字和姓氏的表单的输入从获取请求中获取值。返回 json 的总大小为 0，但是当我对名称的值进行硬编码时，我确实得到了正确的信息。我尝试了很多不同的方式切换获取请求，但我无法得到我正在寻找的响应。

API 文档说：

如果您使用单个搜索词，即使用“cespedes”而不是“yoenis cespedes”，则需要在搜索词后附加一个“%25”字符。没有它，请求将返回 500。

<body>

    <div>
      <form action="">
        <label for="fname">First name:</label><br />
        <input type="text" id="fname" name="fname" value="" /><br />
        <label for="lname">Last name:</label><br />
        <input type="text" id="lname" name="lname" value="" /><br /><br />
        <input type="submit" value="Submit" />
      </form>
    </div>

<script>

      fetch(
        'http://lookup-service-prod.mlb.com/json/named.search_player_all.bam?sport_code=%27mlb%27&active_sw=%27Y%27&name_part=%27' +
          'fname' +
          '_' +
          'lname' +
          '%27'
      )

        .then(function test(res) {
          return res.json();
        })
        .then(function test1(data) {
          console.log('data', data);
});
    </script>
  </body>

当我使用包含名称的提取时，它会返回正确的 json。

http://lookup-service-prod.mlb.com/json/named.search_player_all.bam?sport_code=%27mlb%27&active_sw=%27Y%27&name_part=%27francisco_lindor%25%27

【问题讨论】：

标签： javascript html fetch-api

【解决方案1】：

在创建获取 url 时，您必须实际包含表单值。

你当前的代码

'http://...&name_part=%27' + 'fname' + '_' + 'lname' + '%27'

总会导致

"http://...&name_part='fname_lname'"

无论表单输入如何，因为您只是在这里连接字符串文字。您可以通过在发送之前记录您创建的 url 来检查。

您必须在 javascript 中获取表单值才能发送它们。例如，您可以获取输入的值并将它们保存在如下变量中：

var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;

然后您可以使用这些值来创建您的网址：

var url = 'http://...&name_part=%27' + fname + '_' + lname + '%27';

留意fname 和lname。它们周围没有引号，因此 javascript 将使用这些变量。

【讨论】：

【解决方案2】：

您当前的 fetch 将 fname 和 lname 作为字符串发送，而不是使用它们的实际值。这应该可以正常工作：

const form = document.querySelector('form');
const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
form.addEventListener('submit', e => {
  e.preventDefault();
  fetch(`http://lookup-service-prod.mlb.com/json/named.search_player_all.bam?sport_code=%27mlb%27&active_sw=%27Y%27&name_part=%27${fname.value}_${lname.value}%27`)
    .then(res => res.json())
    .then(data => console.log(data));
})

<div>
  <form>
    <label for="fname">First name:</label><br />
    <input type="text" id="fname" name="fname" value="Aaron" /><br />
    <label for="lname">Last name:</label><br />
    <input type="text" id="lname" name="lname" value="Judge" /><br /><br />
    <input type="submit" value="Submit" />
  </form>
</div>

【讨论】：