HTML调用API疑问：如何传值并在iframe显示Bing搜索结果？

你当前的代码存在几个关键问题，导致提交后跳转到Bing首页而非指定搜索结果，以下是问题分析和修正方案：

问题点拆解 #

• 请求方法错误：表单用了PUT方法，但Bing搜索是获取资源的操作，应该用GET方法（搜索类请求几乎都是GET）。
• Action地址错误：表单action指向Bing首页，而非搜索接口，正确的搜索接口地址是https://www.bing.com/search。
• 表单参数命名错误：搜索关键词的inputname设为/search?q=是完全错误的，Bing搜索的关键词参数是q（比如https://www.bing.com/search?q=shopping里的q）；另外第二个label的for属性和input的id不匹配，应该对应搜索框的id。
• 缺少iframe展示结果：原代码没有iframe，提交后会直接跳转页面，无法在当前页面的iframe中显示结果。
• New Tab逻辑错误：Bing没有newTab这个表单参数，要实现新标签页打开，应该通过表单的target属性控制，而非提交参数。

修正后的代码 #

<!-- 添加iframe用于显示搜索结果 -->
<iframe id="searchResultFrame" width="100%" height="600px" frameborder="0"></iframe>

<form id="bingSearchForm" action="https://www.bing.com/search" method="GET">
  <div>
    <label for="newTab">New Tab?</label>
    <input type="checkbox" name="newTab" id="newTab"/>
  </div>
  <div>
    <label for="searchQuery">What do you want to search?</label>
    <!-- 修正name为q，id改为合理的名称 -->
    <input name="q" id="searchQuery" value="Shopping" />
  </div>
  <div>
    <button type="submit">Search</button>
  </div>
</form>

<script>
// 监听表单提交，根据checkbox状态决定显示方式
document.getElementById('bingSearchForm').addEventListener('submit', function(e) {
  const newTabChecked = document.getElementById('newTab').checked;
  const resultFrame = document.getElementById('searchResultFrame');
  
  if (!newTabChecked) {
    // 不打开新标签时，阻止默认跳转，在iframe加载结果
    e.preventDefault();
    const query = document.getElementById('searchQuery').value;
    resultFrame.src = `https://www.bing.com/search?q=${encodeURIComponent(query)}`;
  } else {
    // 打开新标签时，设置表单target为_blank
    this.target = '_blank';
  }
});
</script>

修正说明 #

1. 添加iframe：专门用于展示搜索结果，避免页面跳转。
2. 修正表单method和action：用GET方法，action指向Bing搜索接口。
3. 修正参数命名：搜索框的name改为q，匹配Bing的搜索参数规则；同步修正label的for属性对应正确的input id。
4. New Tab逻辑实现：通过JavaScript监听表单提交事件，根据checkbox状态选择在iframe加载结果，或在新标签页打开。
5. URL编码：用encodeURIComponent处理搜索关键词，避免特殊字符导致的URL错误。

内容的提问来源于stack exchange，提问作者John Code