Detailed explanation of how to use getJSON method to obtain json data instance-JS Tutorial-php.cn

Detailed explanation of how to use getJSON method to obtain json data instance

巴扎黑

Release： 2017-07-03 09:59:29

Original

4441 people have browsed it

This article mainly introducesjQueryUsing the getJSON method to obtain json data, and analyzing the related skills of the getJSON method to read and traverse json file data in the form of a complete example. Friends in need can refer to the following

The example in this article describes how jQuery uses the getJSON method to obtain json data. Share it with everyone for your reference, the details are as follows:

demo.js:

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

Copy after login

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>

Copy after login

The rendering is as follows:

Here, change the suffix name of JSON to JS, and it can be read normally when placed in a WEB container.

The above is the detailed content of Detailed explanation of how to use getJSON method to obtain json data instance. For more information, please follow other related articles on the PHP Chinese website!