文章/答案/技术大牛

发布

社区首页 >问答首页 >我有一个关于DOM选择器的问题，以及我应该在作业中使用哪个选择器

问我有一个关于DOM选择器的问题，以及我应该在作业中使用哪个选择器
EN

Stack Overflow用户

提问于 2019-11-29 17:52:24

回答 1查看 40关注 0票数 0

我很难建立一种方法让这段代码从我的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>```

express

dom

jquery

ajax

回答 1

Stack Overflow用户

发布于 2019-11-29 18:05:25

如果您有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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59102464

复制

相似问题

问我有一个关于DOM选择器的问题，以及我应该在作业中使用哪个选择器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我有一个关于DOM选择器的问题，以及我应该在作业中使用哪个选择器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我有一个关于DOM选择器的问题，以及我应该在作业中使用哪个选择器
EN