jQuery中读取json接口文件

最新推荐文章于 2024-04-10 12:08:26 发布

weixin_33755847

最新推荐文章于 2024-04-10 12:08:26 发布

阅读量391

点赞数

文章标签： json javascript php ViewUI

原文链接：https://my.oschina.net/afengzxf/blog/2874381

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.首先，使用php，开一个api接口:

//简单的php  json文件输出：
<?php
 
$data =array(
‘request'=>'success',
‘msg'=>'35235'
);
$data_json = json_encode($data);
header(‘Content-type:text/json');
echo $data_json;
 
?>

达到这个效果：（详细地址可以自己变换）

然后需要读取接口json文件：（这里使用的是jquery）:(接口文件名为：js/userinfo.json)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>getJSON获取数据</title> 
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> 
<style type="text/css"> 
#divframe{ 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/userinfo.json", 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> 
<div id="divframe"> 
<div class="loadTitle"> 
<input type="button" value="获取数据" id="btn"/> 
</div> 
<div id="jsonTip"> 
</div> 
</div> 
</body> 
</html>

3.js外调，完成。

转载于:https://my.oschina.net/afengzxf/blog/2874381