javascript - 如何在 ajax 调用中构建搜索 url？

Question

我正在使用 giphy api 构建 giphy 的 wbsite 的克隆。假设用户正在输入诸如“华尔街之狼”之类的输入。现在，当我将这个输入值放入一个变量并将其添加到 url 时，url 的一部分将成为“华尔街之狼”。但根据 giphy 站点“ryan+gosling”中给出的示例，它应该像“wolf+of+all+street”。谁能解释我这种情况？

标签： javascriptajax

Answer 1

你可以在这里参考。您可以从这里获得 API 参考。

const PUBLIC_KEY = 'dc6zaTOxFJmzC';
const BASE_URL = '//api.giphy.com/v1/gifs/';
const ENDPOINT = 'search';
const LIMIT = 1;
const RATING = 'pg';

let $queryInput = $('.query');
let $resultWrapper = $('.result');
let $loader = $('.loader');
let $inputWrapper = $('.input-wrapper');
let $clear = $('.clear');
let $button = $('.random');
let currentTimeout;

let query = {
  text: null,
  offset: 0,
  request() {
    return `${BASE_URL}${ENDPOINT}?q=${this.text}&limit=${LIMIT}&rating=${RATING}&offset=${this.offset}&api_key=${PUBLIC_KEY}`;
  },
  fetch(callback) {
    $.getJSON(this.request())
      .success(data => {
        let results = data.data;
        
        if (results.length) {
          let url = results[0].images.downsized.url;
          console.log(results);
          callback(url);
        } else {
          callback('');
        }
      })
      .fail(error => {
        console.log(error);
      });
  }
}

function buildImg(src = '//giphy.com/embed/xv3WUrBxWkUPC', classes = 'gif hidden') {
  return `<img src="${src}" class="${classes}" alt="gif" />`;
}

$clear.on('click', e => {
  $queryInput.val('');
  $inputWrapper.removeClass('active').addClass('empty');
  $('.gif').addClass('hidden');
  $loader.removeClass('done');
  $button.removeClass('active');
});

$button.on('click', e => {
  query.offset = Math.floor(Math.random() * 25);
  
  query.fetch(url => {
    if (url.length) {
      $resultWrapper.html(buildImg(url));

      $button.addClass('active');
    } else {
      $resultWrapper.html(`<p class="no-results hidden">No Results found for <strong>${query.text}</strong></p>`);

      $button.removeClass('active');
    }

    $loader.addClass('done');
    currentTimeout = setTimeout(() => {
      $('.hidden').toggleClass('hidden');
    }, 1000);
  });
});

$queryInput.on('keyup', e => {
  let key = e.which || e.keyCode;
  query.text = $queryInput.val();
  query.offset = Math.floor(Math.random() * 25);
  
  if (currentTimeout) {
    clearTimeout(currentTimeout);
    $loader.removeClass('done');
  }
  
  currentTimeout = setTimeout(() => {
    currentTimeout = null;
    $('.gif').addClass('hidden');
    
    if (query.text && query.text.length) {
      $inputWrapper.addClass('active').removeClass('empty');
      
      query.fetch(url => {
        if (url.length) {
          $resultWrapper.html(buildImg(url));
          
          $button.addClass('active');
        } else {
          $resultWrapper.html(`<p class="no-results hidden">No Results found for <strong>${query.text}</strong></p>`);
          
          $button.removeClass('active');
        }
        
        $loader.addClass('done');
        currentTimeout = setTimeout(() => {
          $('.hidden').toggleClass('hidden');
        }, 1000);
      });
    } else {
      $inputWrapper.removeClass('active').addClass('empty');
      $button.removeClass('active');
    }
  }, 1000);
});

$blue: #2196F3;
$transition: 300ms ease;

html {
  box-sizing: border-box;
  outline: none;

  *, *:before, *:after {
    box-sizing: inherit;

    &:focus {
      outline: inherit;
    }
  }
}

.title {
  text-align: center;
  font-weight: 200;
  margin-top: 50px;
}

.input-wrapper {
  position: relative;
  width: 90%;
  max-width: 500px;
  margin: 50px auto 0;

  .query {
    height: 50px;
    width: 100%;
    display: block;
    padding: 0 25px;
    border: 1px solid #ccc;

    &:focus {
      outline: none;
      border: 1px solid $blue;

      transition: $transition;
    }

    transition: $transition;
  }

  .loader {
    height: 5px;
    margin: 0;
    padding: 0;
    background: white;
    margin: 0 auto;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      background: $blue;
      width: 0%;
      height: 5px;

      transition: $transition;
    }

    &.done {
      &:before {
        width: 100%;
      }
    }
  }

  .clear {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    width: 30px;
    opacity: 1;

    &:before {
      content: '\00d7';
      color: $blue;
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      width: 100%;
      line-height: 50px;
      
      transition: $transition;
    }
    
    &:hover {
      &:before {
        cursor: pointer;
      }
    }
  }
  
  &.active {
    margin-top: -55px;
    
    .query {
      height: 30px;
      margin-top: 0px;

      transition: $transition;
    }
    
    .clear {
      height: 30px;
      
      &:before {
        line-height: 30px;
      }
    }
  }
  
  &.empty {
    .clear {
      opacity: 0;
    }
  }
  
  transition: $transition;
}

.result {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 5% 25px 0;
  /* background: #eee; */
  
  img, p.no-results {
    width: 100%;
    max-width: 500px;
    height: auto;
    opacity: 1;
    
    &.hidden {
      opacity: 0;
      
      transition: $transition;
    }
    
    transition: $transition;
  }
  
  p.no-result {
    font-weight: 200;
    
    &.center {
      text-align: center;
    }
  }
}

.random {
  width: 90%;
  max-width: 500px;
  margin: 50px auto;
  height: 50px;
  display: block;
  
  background: $blue;
  color: white;
  border: none;
  
  opacity: 0;
  
  &:hover {
    background: darken($blue, 10%);
  }
  
  &.active {
    opacity: 1;
  }
  
  transition: $transition;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 class="title">Giphy API Search</h1>

<div class="input-wrapper empty">
    <input type="text" class="query" />
    <div class="loader"></div>
    <div class="clear"></div>
</div>
<div class="result">
</div>