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

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

我正在尝试从文本字段获取数据到我的 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) {...
          

解决方法

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

$(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,...

,

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

,

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

document.getElementById('country').value;

,

只需添加一行

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