Question

我已经尝试了这个代码的几个配方，并得到了混合的，不引人注目的结果。这个想法非常简单：用户在文本框中输入搜索字符串，单击按钮，字符串将传递给var search。然后search变量通知AJAX请求，该请求被发送并返回JSON文件。然后我现在在DOM中显示该文件（清理它是下一步，尽管文件随着按钮点击代码的引入而不断消失）。

最初，我在var search下直接声明$(document).ready(. . .，并认为我的按钮点击代码可用于从文本框中获取搜索字符串并更新该变量。我错了。变量不会更新。如果有人知道为什么，我会很高兴听到这个解释。

下面的代码表示尝试通过将所有AJAX代码放在按钮单击上下文中来解决该问题，以便搜索变量可用于AJAX请求。结果是一个API错误闪烁了一秒钟，说搜索变量没有传递给API。除了没有更新和/或传递的搜索之外，Console.log语句不会显示任何内容。这是怎么回事？

<!DOCTYPE html>

<html lang="en">
    <head>
        <!-- Bootstrap -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <!-- CSS -->
        <style>
            .container {
                height: 50vh;
                align-items: center;
            }

        /* code for sliding search box adapted from https://bootsnipp.com/snippets/2o42z */

        </style>
        <!-- JS/JQ -->
        <script>
            $(document).ready(function () {
                // search parameter provided by user started with . .  .
                // var search;
                $("button").on("click", function () {
                    // use .val(), .text() did not do the job
                    var search = $("#searchfield").val();
                    console.log(search);
                    // AJAX request options for WikiMedia API
                    var ajaxOptions = {
                        crossDomain: true,
                        dataType: "json",
                        url: "https://en.wikipedia.org/w/api.php",
                        method: "GET",
                        data: {
                            action:"query",
                            format:"json",
                            titles:search,
                            list:"search",
                            srsearch:search,
                            srprop:"snippet",
                            srlimit:"100",
                            origin:"*"
                        }
                    };
                    console.log(ajaxOptions);
                    $.ajax(ajaxOptions).done(updateDOM);
                });

                function updateDOM (json) {
                    $("#json-text").html(JSON.stringify(json));
                }

            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div id="json-text"class="col-md-12"> </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <form>
                        <input id="searchfield" type="text" placeholder="Search">
                        <button type="submit" class="btn btn-default"></button>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

console.log(json)

的输出

{batchcomplete: "", continue: {…}, query: {…}} VM145 jquery.min.js:4 XHR finished loading: GET "en.wikipedia.org/w/…*". send @ VM145 jquery.min.js:4 ajax @ VM145 jquery.min.js:4 (anonymous) @ wiki.html:49 dispatch @ VM145 jquery.min.js:3 q.handle @ VM145 jquery.min.js:3

修改这是后续问题的代码。单击事件上的按钮在设置时不会更新搜索变量。

 $(document).ready(function () {
                    var search;
                    $("button").on("click", function () {
                        search = $("#searchfield").val();
                     });

按钮单击内的console.log搜索将显示使用按钮单击时文本框中的数据更新，但是按钮单击事件之外的搜索var的console.log将显示无论如何，在文档就绪下设置的搜索变量将被设置为空。我尝试更改名称，以免混淆事物，但（如预期的那样）这没有做任何事情。

Answer 1

button类型为submit，在form内使用时，会提交表单。

要停止此行为，请在提交按钮的preventDefault处理程序中使用click方法。

// pass the parameter "e" for the event 
$("button").on("click", function (e) {
    e.preventDefault();

    // rest of the code
    // ...
});

这是一个演示：

＆＃13;

$(document).ready(function() {
  // search parameter provided by user started with 
  // var search;

  $("button").on("click", function(e) {
    e.preventDefault();

    // use .val(), .text() did not do the job
    var search = $("#searchfield").val();
    console.log(search);
    // AJAX request options for WikiMedia API
    var ajaxOptions = {
      crossDomain: true,
      dataType: "json",
      url: "https://en.wikipedia.org/w/api.php",
      method: "GET",
      data: {
        action: "query",
        format: "json",
        titles: search,
        list: "search",
        srsearch: search,
        srprop: "snippet",
        srlimit: "100",
        origin: "*"
      }
    };
    console.log(ajaxOptions);
    $.ajax(ajaxOptions).done(updateDOM);
  });

  function updateDOM(json) {
    $("#json-text").html(JSON.stringify(json));
  }

});

＆＃13;

.container {
  height: 50vh;
  align-items: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="row">
    <div class="col-md-12">
      <form>
        <input id="searchfield" type="text" placeholder="Search">
        <button type="submit" class="btn btn-default">search</button>
      </form>
    </div>
    <div class="row">
      <div id="json-text" class="col-md-12"> </div>
    </div>
  </div>
</div>

＆＃13;

按钮上的AJAX请求单击不更新DOM

1 个答案: