jQuery中读取json文件示例代码_jquery读取本地json文件资源-CSDN文库

181 浏览量 2020-12-01 15:26:10 上传评论收藏 61KB PDF 举报

json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。 $.getJSON(url,[data],[callback]) url：加载的页面地址 data: 可选项，发送到服务器的数据，格式是key/value callback:可选项，加载成功后执行的回调函数 1.首先建一个JSON格式的文件userinfo.json 保存用户信息。如下: [ { "name":"张国立", "sex":"男", "email":"zhangguoli@123.com" }, { "name":"张铁林", "sex":"男", "email":"zha 在JavaScript和jQuery的世界里，JSON（JavaScript Object Notation）是一种常用的数据交换格式，因其简洁、易读性而受到青睐。jQuery提供了方便的API来处理JSON数据，其中之一就是`$.getJSON()`函数，它允许我们从服务器获取JSON数据并进行处理。 `$.getJSON()`的基本语法如下： ```javascript $.getJSON(url, [data], [callback]) ``` 参数说明如下： - `url`: 这是必需的参数，表示要请求的JSON数据的URL。 - `[data]`: 可选参数，一个对象，用于向服务器发送键值对数据，通常在需要POST请求时使用。 - `[callback]`: 可选参数，一个函数，当JSON数据成功加载后会被调用，回调函数接收解析后的JSON数据作为参数。在给出的示例中，我们有一个JSON文件`userinfo.json`，它存储了用户的信息，如下所示： ```json [{"name":"张国立","sex":"男","email":"zhangguoli@123.com"}, {"name":"张铁林","sex":"男","email":"zhangtieli@123.com"}, {"name":"邓婕","sex":"女","email":"zhenjie@123.com"}] ``` 这是一个简单的JSON数组，包含多个用户对象，每个对象都有`name`、`sex`和`email`属性。为了展示这些数据，我们可以创建一个HTML页面，使用jQuery来获取和解析JSON数据。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>jQuery获取JSON数据示例</title> <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script> <style> #jsonTip { border: 1px solid #999; width: 500px; margin: 0 auto; } .loadTitle { background: #CCC; height: 30px; } </style> <script> $(function () { $("#btn").click(function () { $.getJSON("js/userinfo.json", function (data) { var $jsontip = $("#jsonTip"); var strHtml = ""; $.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> ``` 在这个示例中，当用户点击“获取数据”按钮时，`$.getJSON()`会向服务器发送请求，获取`userinfo.json`中的数据。然后，使用`$.each()`遍历返回的JSON数组，将用户信息拼接成HTML字符串，并显示在ID为`jsonTip`的元素内。另外，还提到了一种自动加载JSON内容的情况，例如加载带有图片和超链接的数据。这个场景可以通过类似的方式实现，只需调整解析和展示数据的部分，将图片和超链接的信息插入到HTML结构中。例如，如果有这样一个JSON文件`da.json`： ```json [ {"img": "http://example.com/image1.jpg", "url": "http://example.com/page1"}, {"img": "http://example.com/image2.jpg", "url": "http://example.com/page2"}, {"img": "http://example.com/image3.jpg", "url": "http://example.com/page3"} ] ``` 可以创建一个类似的JavaScript函数来处理这种数据： ```javascript $.getJSON("js/da.json", function (data) { var strHtml = ""; $.each(data, function (index, item) { strHtml += '<a href="' + item.url + '"><img src="' + item.img + '" alt=""></a><br>'; }); $("#imageList").html(strHtml); }); ``` 在这个例子中，数据解析后会生成包含图片和链接的HTML，并添加到ID为`imageList`的元素中。总结来说，jQuery的`$.getJSON()`方法是处理JSON数据的强大工具，它可以方便地从服务器获取JSON数据并进行解析，然后在前端展示或操作这些数据。无论是简单的用户信息，还是更复杂的图像和链接列表，都能通过这种方式有效地进行数据交互。在实际的Web开发中，熟练掌握JSON和jQuery的这种组合是非常重要的，能够极大地提高开发效率和用户体验。

资源详情

资源评论

资源推荐