将来自 jquery 的 json 数据放入 Thymeleaf

Question

我正在使用 google 书 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 returns title 和 authors 是这样的，因此在新回调中使用 json.items[0].volumeInfo代码。

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

$(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)
    };
  });
});

<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>

将来自 jquery 的 json 数据放入 Thymeleaf

Put json data from jquery into Thymeleaf

javascript

jquery

json

isbn

thymeleaf