如何从输入字段中获取数据到我的 ajax 请求中？答案

【问题标题】：How do I get data from an input field into my ajax request?如何从输入字段中获取数据到我的 ajax 请求中？
【发布时间】：2021-04-10 10:28:46
【问题描述】：

我正在尝试将文本字段中的数据获取到我的 ajax 请求中，以便我可以从 API 获得响应。但是我对JS的经验很少，所以我无法弄清楚。

我正在使用物化框架。

HTML：

<div class="input-field">
    <label for="country">Autocomplete</label>
    <input type="text" id="country" class="autocomplete">
</div>

JS：

$(document).ready(function() {
    //Autocomplete
    $(function() {
      $.ajax({
        type: 'GET',
        url: 'https://sandbox.iexapis.com/stable/search/**{I need the text from what the user has put in here}**?token='myiextoken',
        success: function(response) {...

【问题讨论】：

标签： javascript ajax materialize

【解决方案1】：

您可以使用jquery val() 方法获取输入值，然后您需要使用encodeURIComponent 对该值进行编码，然后再将其传递到您的url。

$(document).ready(function() {
  //Autocomplete
  $(function() {
    var inputValue = $('#country').val();
    var url = 'https://sandbox.iexapis.com/stable/search/'
              + encodeURIComponent(inputValue)
              + '?token='myiextoken';

    $.ajax({
      type: 'GET',
      url: url,
      ...

【讨论】：

【解决方案2】：

使用val() 获取输入的值。

const value = $("#country").val();

并通过string template literal 使用它

$(document).ready(function() {
    //Autocomplete
    const value = $("#country").val();
    $(function() {
      $.ajax({
        type: 'GET',
        url: `https://sandbox.iexapis.com/stable/search/${value}token='myiextoken`,
        success: function(response) {...
          
          */

<div class="input-field">
  <label for="country">Autocomplete</label>
  <input type="text" id="country" class="autocomplete">
  <button> click </button>
</div>

【讨论】：

【解决方案3】：

如果你想使用原生 JavaScript，只需写：

document.getElementById('country').value;

【讨论】：

【解决方案4】：

只需添加一行

 $.ajax({
    type: 'GET',
    url: "https://sandbox.iexapis.com/stable/search/" + $('#country').val() + "?token='myiextoken'",
    success: function(response) {...

【讨论】：