为什么这个javascript/jquery没有捕获用户输入?

njboot • 7 年前 • 2110 次点击

我不明白为什么用户输入 搜索字段 当我进行查询时,不会捕获输入框。当我控制台注销时奎尔输入框中的查询不存在。请参阅下面的代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
    <title>Document</title>

</head>

<body>
    <div class="container">
        <h1>gifTastic!</h1>
        <label for="search-field">Find a TV Show: </label>
        <input type="text" id="search-field">
        <input id="find-giphy" type="submit" value="giphy Search">
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        var baseURL = "http://api.giphy.com/v1/gifs/search?q="
        var apiKey = "Yz4pO4lJDaMYGIX80M9gc2Mq7HKKS2or"
        var input = $("#search-field").val();
        
        var queryURL = baseURL + input + "&api_key=" + apiKey + "&limit=10";

        $("#find-giphy").on("click", function () {
            $.ajax({
                url: queryURL,
                method: "GET"
            }).then(function (response) {
                console.log(response);
                console.log(queryURL);
            })
        })
    </script>
</body>

</html>

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/47573

文章 [ 2 ] | 最新文章 7 年前

• 1 楼

msg 7 年前

当您 事实上 单击按钮以便获取值。

var baseURL = "http://api.giphy.com/v1/gifs/search?q="
var apiKey = "Yz4pO4lJDaMYGIX80M9gc2Mq7HKKS2or"

$("#find-giphy").on("click", function() {
  var input = $("#search-field").val();
  var queryURL = baseURL + input + "&api_key=" + apiKey + "&limit=10";
  $.ajax({
    url: queryURL,
    method: "GET"
  }).then(function(response) {
    console.log(response);
    console.log(queryURL);
  })
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="container">
  <h1>gifTastic!</h1>
  <label for="search-field">Find a TV Show: </label>
  <input type="text" id="search-field">
  <input id="find-giphy" type="submit" value="giphy Search">
</div>

• 2 楼

Mamun 7 年前

问题是,您正在从页面加载时的输入中获取值,而该值为空。

您应该按如下方式获取click handler函数中输入字段的值:

var baseURL = "http://api.giphy.com/v1/gifs/search?q="
var apiKey = "Yz4pO4lJDaMYGIX80M9gc2Mq7HKKS2or"
$("#find-giphy").on("click", function () {
  var input = $("#search-field").val();
  var queryURL = baseURL + input + "&api_key=" + apiKey + "&limit=10";
  $.ajax({
      url: queryURL,
      method: "GET"
  }).then(function (response) {
      console.log(response);
      console.log(queryURL);
  })
})

<div class="container">
    <h1>gifTastic!</h1>
    <label for="search-field">Find a TV Show: </label>
    <input type="text" id="search-field">
    <input id="find-giphy" type="submit" value="giphy Search">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

登录后回复