<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .inp{ 100px; height: 100px;} .show{ 200px; height: 200px; border: 1px solid red;} </style> <script src="js/jquery-2.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var oBtn = $(".inp"); var oShow = $(".show"); var url1 = "json.json"; oBtn.click(function(){ ajax(url1); }) function ajax(url){ $.ajax({ type:"get", url:url, async:true, success:function(result){ // console.log(result); var oDate =eval(result); // console.log(oDate); oShow.append(oDate.people[1].email); } }); } }) </script> </head> <body> <input class="inp" type="button" value="button" /> <div class="show"></div> </body> </html>
json.json
{ "people":[ {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"}, {"firstName":"Jason","lastName":"Hunter","email":"bbbb"}, {"firstName":"Elliotte","lastName":"Harold","email":"cccc"} ] }
点击按钮获取 json.json中的数据 无刷新整个页面 让局部数据刷新,只需要改变json.json中的数据