Question

我很难建立一种方法来从我的app.js中提取此代码。我想使用document.getelementbyId从图书搜索栏中获取值，但同时我不确定如何提取选项A，B和C。将要拉出的app.js的主要代码是：

[{"author":"me","title":"BookA","pages":600,"quality":"new"},{"author":"you","title":"BookB","pages":400,"quality":"used"},{"author":"us","title":"BookC","pages":500,"quality":"old"}]

  <head>
    <title>Books - ExpressJS Web Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        var asyncRequest;

        $("#submit").click(function() {
          var title = $("#title").val();
          var url = "http://localhost:3000/book?title=" + title;
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              var info = JSON.parse(this.responseText);
              $("#data-title").val(info.book.title);
              $("#data-author").val(info.book.author);
              $("#data-pages").val(info.book.pages);
              $("#data-condition").val(info.book.quality);
            }
          };
          xhttp.open("GET", url, true);
          xhttp.send();
        });
      });

      $.get( "http://localhost:3000/book?title=", function( data ) {
  });
    </script>
    <style>
      input { width: 100px }
      label { display: inline-block; text-align: right; }
      #output { width: 200px }
      .data { margin-bottom: 5px; }
      .finput { float: right; }
    </style>
  </head>
  <body>
    <div class="search">
      Search Book Title:<br><br>
      <input id="title" type="text" name="book_title" />
      <button id="submit" type="button">Search</button><br><br>
    </div>
    <div id="output">
      Data:<br><br>
      <label class="data" for="data-title">Title</label>
      <input id="data-title" class="finput" type="text" name="book_info"/>
      <br>
      <label class="data" for="data-author">Author</label>
      <input id="data-author" class="finput" type="text" name="book_info"/>
      <br>
      <label class="data" for="data-pages"># Pages</label>
      <input id="data-pages" class="finput" type="text" name="book_info"/>
      <br>
      <label class="data" for="data-condition">Condition</label>
      <input id="data-condition" class="finput" type="text" name="book_info"/>
    </div>
  </body>
</html>```

Answer 1

如果您有jQuery，请一路使用jQuery。

$(function() {
  $("#searchForm").on("submit", function(e) {
    e.preventDefault(); // cancel submit
    var title = $("#title").val();
    var url = "http://localhost:3000/book?title=" + encodeURIComponent(title);
    $.get(url, function(data) {
      const info = data.info; // I am guessing here
      $("#data-title").val(info.book.title);
      $("#data-author").val(info.book.author);
      $("#data-pages").val(info.book.pages);
      $("#data-condition").val(info.book.quality);
    });
  });
});

<form id="searchForm">
  <div class="search">
    Search Book Title:<br><br>
    <input id="title" type="text" name="book_title" />
    <button type="submit">Search</button><br><br>
  </div>
</form>
<div id="output">
  Data:<br><br>
  <label class="data" for="data-title">Title</label>
  <input id="data-title" class="finput" type="text" name="book_info" />
  <br>
  <label class="data" for="data-author">Author</label>
  <input id="data-author" class="finput" type="text" name="book_info" />
  <br>
  <label class="data" for="data-pages"># Pages</label>
  <input id="data-pages" class="finput" type="text" name="book_info" />
  <br>
  <label class="data" for="data-condition">Condition</label>
  <input id="data-condition" class="finput" type="text" name="book_info" />
</div>

但是，如果您退回的书不止一本，则需要循环播放或使用下一个/上一个按钮，但是我猜是这样

示例捕获：

const info = [{
  "author": "me",
  "title": "BookA",
  "pages": 600,
  "quality": "new"
}, {
  "author": "you",
  "title": "BookB",
  "pages": 400,
  "quality": "used"
}, {
  "author": "us",
  "title": "BookC",
  "pages": 500,
  "quality": "old"
}]

const book = info[0];
$("#data-title").val(book.title);
$("#data-author").val(book.author);
$("#data-pages").val(book.pages);
$("#data-condition").val(book.quality);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output">
  Data:<br><br>
  <label class="data" for="data-title">Title</label>
  <input id="data-title" class="finput" type="text" name="book_info" />
  <br>
  <label class="data" for="data-author">Author</label>
  <input id="data-author" class="finput" type="text" name="book_info" />
  <br>
  <label class="data" for="data-pages"># Pages</label>
  <input id="data-pages" class="finput" type="text" name="book_info" />
  <br>
  <label class="data" for="data-condition">Condition</label>
  <input id="data-condition" class="finput" type="text" name="book_info" />
</div>

我对DOM选择器有疑问，我应该在作业中使用哪个选择器

1 个答案: