Question

我正在使用Google book api获取ISBN，我可以获取数据。现在我想将这些数据附加到表单中。我无法做到这一点。这是我的Jquery代码

$(document).ready(function(){
    $('#submitCode').click(function(){
    var x;
     var isbn = $('#isbn').val();
     var xmlhttp = new XMLHttpRequest();
     var url = "https://www.googleapis.com/books/v1/volumes?q=isbn:" + isbn;

        xmlhttp.onreadystatechange = function() {
        /*<![CDATA[*/
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        x = JSON.parse(xmlhttp.responseText);
        callback(x);
       }/*]]>*/
       };
       xmlhttp.open("GET", url, true);
       xmlhttp.send();

function callback(x) {
alert(JSON.stringify(x));
console.log(x);
};
});
});

我的HTML代码

 <div class="input-field col s6 m6">
 <input id="author" name="author" th:field="*{author}" type="text" class="validate" />
  <label for="author">Author</label>
  </div>
  <div class="input-field col s6 m6">
  <input id="title" name="title" th:field="*{title}" type="text" class="validate" />
   <label for="title">Title</label>
   </div>

如何将作者数据和标题附加到Thymeleaf的表格中？

Answer 1

如果您已经能够检索数据，则只需使用$('#id').val(value)更新DOM。我做了一些挖掘，看起来你的API会像这样返回title和authors，因此在新的回调代码中使用了json.items[0].volumeInfo。

{
  "items": [{
    "volumeInfo": {
      "title": "Example Title",
      "subtitle": "Example Subtitle",
      "authors": [ "Example Author" ]
    }
  }]
}

＆＃13;

$(document).ready(function() {
  $('#submitCode').click(function() {
    var x;
    var isbn = $('#isbn').val();
    var xmlhttp = new XMLHttpRequest();
    var url = "https://www.googleapis.com/books/v1/volumes?q=isbn:" + isbn;

    xmlhttp.onreadystatechange = function() {
      /*<![CDATA[*/
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        x = JSON.parse(xmlhttp.responseText);
        callback(x);
      } /*]]>*/
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();

    function callback (json) {
      var book = json.items[0].volumeInfo
      $('#author').val(book.authors.join('; '))
      $('#title').val(book.title)
    };
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input id="isbn" type="text" value="1904764827"/>ISBN</label>
<div class="input-field col s6 m6">
  <input id="author" name="author" th:field="*{author}" type="text" class="validate" />
  <label for="author">Author</label>
</div>
<div class="input-field col s6 m6">
  <input id="title" name="title" th:field="*{title}" type="text" class="validate" />
  <label for="title">Title</label>
</div>
<button id="submitCode">Submit</button>

＆＃13;

将json的json数据放入Thymeleaf

1 个答案: