JavaScript：根据输入字段值将查询字符串添加到 URL（如果已设置）？

Question

我在一个表单中有 5 个输入字段，我想添加它们各自的参数和值（如果已设置）以查询字符串

我想做的是让它在domain.tld末尾的第一个参数前加上?，如果有none，并显示特定参数及其第一个输入的值然后如果其他输入，添加 & 和下一个参数值，然后 & 和其余参数和值作为查询字符串是结构化的，如果通过元素 ID 在它们各自的输入中插入了值，则只添加参数和它们的值。

在任务中，需要添加带有参数及其值的查询字符串，当且仅当它们有相应的输入时。不知道为什么它不起作用。这与 PHP 的 strpos()（已经在其他地方具有类似的重定向功能并且有效）和 indexOf()[= JavaScript 中的 34=] 相当于 PHP 的 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() 语法，其他一切都很好

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 (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'paramter0=' + paramter0;
  }
  if (parameter1) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter1=' + parameter1;
  }
  if (parameter2) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter2=' + parameter2;
  }
  if (parameter3) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter3=' + parameter3;
  }
  if (parameter4) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter4=' + parameter4;
  }
  console.log(url)
}

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

<!DOCTYPE html>
<html>

<body>

  <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>



</body>

</html>

Answer 2

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

如果硬要，那就是if (url.indexOf('?') !== -1) {来测试有没有?

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

以下是如何使用 URL.searchParams

将参数附加到 URL

添加这个以获得 Internet Explorer 支持

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

注意： 我将名称更改为 parameterize

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>

Answer 3

如果您将输入收集在一个数组中，无论您有多少参数，您都可以过滤并连接它们。这样您就不必在每次添加参数时都编写新代码，因为查询字符串 ? 的开头将始终位于数组连接和数组项之间的 & 分隔符之前。我将 .parameter 类移到了输入中，因为它对我来说比在标签上更有意义。

const create_uri = () => {
  const parameters = [ ...document.querySelectorAll( '.parameter' ) ];
  const root = 'https://domain.tld';
  const query_string = parameters.map( input => input.value ? `${ input.id }=${ input.value }` : '' );
  return `${ root }?${ encodeURIComponent( query_string.join( '&' )) }`;
};

const parameterize = () => {
  const uri = create_uri();
  console.log( uri );
};

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

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

Answer 4

也许这就是你想要的jsFiddle。

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

function parametrize() {
  let url = 'https://domain.tld';
  let params = {};
  document.querySelectorAll('#parameters input.select-selected').forEach((element) => {
    if (element.value.length > 0)
        params[element.id] = element.value;
  });
  let esc = encodeURIComponent;
  let query = Object.keys(params)
    .map(k => esc(k) + '=' + esc(params[k]))
    .join('&');
  url += '?' + query;
  alert(url);
}

Answer 5

请注意，如果您不想对您的输入应用特殊处理，您所做的一切完全等同于此（添加 type="submit" 到按钮以提交表单）：

<div id="parameters" class="panel-collapse collapse">
 
 <form action="https://domain.tld" method="get">
  
  <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" type="submit" class="btn btn-primary">
        APPLY
  </button>

 </form>
 
</div>

说明：通过在 form 标签中使用 method="get"，所有输入值将在提交时通过 URL 传递格式 url?{input1_name}={input1_value}&{input2_name}={input2_value}...，就像您以自定义方式所做的那样

JavaScript：根据输入字段值将查询字符串添加到 URL（如果已设置）？

JavaScript: Adding query string to URL based on input fields values, if set?

javascript

input

indexof

getelementbyid

query-string