时间戳

首页 > 解决方案 > HTML 获取方法

html - HTML 获取方法

问题描述

我创建了一个带有一个文本字段和一个选择字段并使用 GET 方法的表单。提交表单时是否可以将参数合并为一个？示例：test.html?domain=test.com

<form action = "test.html" method = "GET">
     Name: <input type = "text" name = "domain" />
      <select name="domain_ext" class="inputAuto">
        <option value=".com">.com</option>
      </select>
     <input type = "submit" />
  </form>

标签： html

解决方案

您可以使用 XHR https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

这是一个非常基本的示例：

var getData = function () {
  var xhr = new XMLHttpRequest();
  var domain = document.querySelector('.domainInput').value;
  var ext = document.querySelector('.extInput').value;
  xhr.responseType = 'text';
  xhr.onload = function () {
    if (xhr.readyState === xhr.DONE && xhr.status === 200) {
      document.querySelector('.output').innerText = xhr.responseText;
    }
  };
  xhr.open('GET', domain + ext, true);
  xhr.send(null);
};

document.querySelector('.getButton').addEventListener('click', getData);
<form>
   Name: <input type="text" value="https://output.jsbin.com/juwuy" class="domainInput" />
    <select class="extInput">
      <option value=".js" default>.js</option>
      <option value=".com">.com</option>
    </select>
   <input type="button" value="Get" class="getButton"/>
</form>
<p class="output"></p>

推荐阅读