Explication détaillée de la façon d'utiliser la méthode getJSON pour obtenir une instance de données JSON-js tutoriel-php.cn

Explication détaillée de la façon d'utiliser la méthode getJSON pour obtenir une instance de données JSON

巴扎黑

Libérer： 2017-07-03 09:59:29

original

4430 Les gens l'ont consulté

Cet article présente principalement jQuery pour utiliser la méthode getJSON pour obtenir des données json, et analyse les compétences associées de la méthode getJSON pour lire et parcourir les données de fichiers json sous la forme d'un exemple complet. en cas de besoin, vous pouvez vous y référer

L'exemple de cet article décrit comment jQuery utilise la méthode getJSON pour obtenir des données json. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

demo.js :

[
  {
    "name":"吴者然",
    "sex":"男",
    "email":"demo1@123.com"
  },
  {
    "name":"吴中者",
    "sex":"男",
    "email":"demo2@123.com"
  },
  {
    "name":"何开",
    "sex":"女",
    "email":"demo3@123.com"
  }
]

Copier après la connexion

demo.html :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON获取数据</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<style type="text/css">
#pframe {
  border: 1px solid #999;
  width: 500px;
  margin: 0 auto;
}
.loadTitle {
  background: #CCC;
  height: 30px;
}
</style>
<script type="text/javascript">
$(function(){
  $("#btn").click(function(){
    $.getJSON("js/demo.js",function(data){
      var $jsontip = $("#jsonTip");
      var strHtml = "123";//存储数据的变量
      $jsontip.empty();//清空内容
      $.each(data,function(infoIndex,info){
        strHtml += "姓名："+info["name"]+"<br>";
        strHtml += "性别："+info["sex"]+"<br>";
        strHtml += "邮箱："+info["email"]+"<br>";
        strHtml += "<hr>"
      })
      $jsontip.html(strHtml);//显示处理后的数据
    })
  })
})
</script>
</head>
<body>
<p id="pframe">
  <p class="loadTitle">
    <input type="button" value="获取数据" id="btn"/>
  </p>
  <p id="jsonTip"> </p>
</p>
</body>
</html>

Copier après la connexion

Le rendu est le suivant :