Json对象显示在html中

Json object display in html

本文关键字：html 显示 对象 Json      更新时间：2023-09-26

嘿，伙计们，我是新的json语法，我有一个问题。我做了一个函数，从远程服务器获取json中的数据，如下所示:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
  <script type="text/javascript">
    function getStates(value) {
            var data = {
                q: value
            } 
            $.ajax({
                url: 'https://something.hr/api/search',
                method: 'GET',
                headers: {'Accept': 'application/json'},
                data: data
            }).done(function(data) {
                //do something with data I returned to you
                console.log("success")
                console.log(data)

            }).fail(function(data) {
                //doSomethingWith the data I returned to you
                console.log("fail")
                console.log(data)
            });
        };

  </script>
</head>
<body>
    <input type="text" onkeyup="getStates(this.value)" >
    <br>
 <script>
</script>
</body>
</html>

我的问题是我知道如何在控制台日志中获取对象，但我希望在html中获得该对象，就像在一些框中一样，然后单击它并打开他的数据(名称，id，地址等)

var httpManager = (function() {
  var getData = function(value) {
    $.ajax({
      url: 'https://api.github.com/users/zixxtrth',
      method: 'GET'
    }).done(function(data) {
      //do something with data I returned to you
      jQuery('#avatar').attr('src', data.avatar_url);
      jQuery('#name').html(data.name);
      jQuery('#username').html(data.login);
    }).fail(function(data) {
      //doSomethingWith the data I returned to you
      alert('No Data');
    });
  };
  return {
    getData: getData()
  }
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<img src='' id='avatar' width='200' height='200' />
<h1 id='name'></h1>
<h2 id='username'></h2>

相关文章：