Maison >interface Web >js tutoriel >Explication détaillée de la façon d'utiliser la méthode getJSON pour obtenir une instance de données JSON

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

巴扎黑original: 2017-07-03 09:59:294438parcourir

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"
  }
]

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>

Le rendu est le suivant :

Ici, changez le nom du suffixe de JSON en JS, et cela peut être lire normalement lorsqu'il est placé dans un conteneur WEB.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jQuery.getJSON(url, [data], [callback]) Introduction de baseArticle suivant：jQuery.getJSON(url, [data], [callback]) Introduction de base

Articles Liés

Voir plus