JavaScript:根据输入字段值将查询字符串添加到 URL(如果设置)？

Question

我的表单中有 5 个输入字段，我想将它们各自的参数和值(如果设置)添加到查询字符串

我想做的是让它在domain.tld末尾的第一个参数之前添加?(如果没有)，并显示特定参数及其第一个输入的值然后，如果是其他输入，则添加 & 和下一个带有值的参数，然后添加 & 以及其余参数和值，因为查询字符串是结构化的，并且仅添加参数及其值(如果存在)是按元素 ID 插入到各自输入中的值。

在任务中，当且仅当有相应的输入时，才需要添加带有参数及其值的查询字符串。不知道为什么它不起作用。这与 PHP 的 strpos() 配合得很好(已经在其他地方具有类似的重定向功能，并且它可以工作)，并且 JavaScript 中的 indexOf() 相当于 PHP 的 strpos() 。 strpos()，对吧？下面提供了我尝试过的内容。

不知何故，我错过了继续认为 **url = url + ** 部分就足够了。最后我想在 textarea 元素中显示 URL。只需将参数添加到 URL 并在 texarea 中显示结果，以便单击复制以供使用。已经弄清楚了点击复制。

function parameterize() {
  var paramter0 = document.getElementById('parameter0').value;
  var parameter1 = document.getElementById('parameter1').value;
  var parameter2 = document.getElementById('parameter2').value;
  var parameter3 = document.getElementById('parameter3').value;
  var parameter4 = document.getElementById('parameter4').value;

  var url = 'https://domain.tld';

  if (paramter0) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'paramter0=' + paramter0;
  }
  if (parameter1) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter1=' + parameter1;
  }
  if (parameter2) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter2=' + parameter2;
  }
  if (parameter3) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter3=' + parameter3;
  }
  if (parameter4) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter4=' + parameter4;
  }
}
document.getElementById('paramed_url').innerHTML = url;

document.getElementById('add_parameters').addEventListener('click', parameterize);

<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button id="add_parameters" name="submit" class="btn btn-primary">
        APPLY
        </button>
</div>

Answer 1

正如我在评论中指出的那样，您有一个语法错误:indexOf 未定义

如果你坚持的话，那就是if (url.indexOf('?') !== -1) {测试是否有 ?

我假设您不仅仅是想提交表单，在这种情况下您不需要任何处理，表单提交将为您完成

以下是如何使用 URL.searchParams 将参数附加到 URL

添加此内容以获得 Internet Explorer 支持

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

注意:我更改了参数化的名称

var url = new URL('https://domain.tld');

function parameterize() {
  document.querySelectorAll(".select-selected").forEach(function(inp) {
   url.searchParams.append(inp.name,inp.value); // if (inp.value) ...
  })
  console.log(url)
}

document.getElementById('add_parameters').addEventListener('click', parameterize);

<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button type="button" id="add_parameters" class="btn btn-primary">
        APPLY
        </button>
</div>

jQuery 注意我在这里测试该值。如果什么都不填写，则得到原始URL

var url = new URL('https://domain.tld');

function parameterize() {
  $(".select-selected").each(function() {
   if (this.value) url.searchParams.append(this.name,this.value); // only if value entered
  })
  console.log(url)
}

$('#add_parameters').on('click', parameterize);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button type="button" id="add_parameters" class="btn btn-primary">
        APPLY
        </button>
</div>