分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

jQuery ajax读取本地json文件

发布时间:2023-09-06 02:16责任编辑:傅花花关键词:jsjQueryjson

jQuery ajax读取本地json文件

  • ceshi.json

     ?{ ?????"first": [ ?????????{ ?????????????"name": "张三", ?????????????"sex": "男" ?????????}, { ?????????????"name": "李思", ?????????????"sex": "女" ?????????}, { ?????????????"name": "王五", ?????????????"sex": "男" ?????????}, { ?????????????"name": "赵柳", ?????????????"sex": "女" ?????????} ?????????????] ?}
  • 源码:

     ?<!DOCTYPE html> ?<html> ?<head> ?<meta charset="UTF-8"> ?<script type="text/javascript" src="js/jquery.js"></script> ?<script> ?????//方法一 ?????function ajax_test() { ?????????$.ajax({ ?????????????url: "ceshi.json", //json文件位置 ?????????????type: "GET", //请求方式为get ?????????????dataType: "json", //返回数据格式为json ?????????????success: function(data) { //请求成功完成后要执行的方法 ??????????????????alert(data.first[0].name); ?????????????????//each循环 使用$.each方法遍历返回的数据date ?????????????????$.each(data.first, function(i, item) { ?????????????????????var str = ‘<div>姓名:‘ + item.name + ‘性别:‘ + item.sex + ‘</div>‘; ?????????????????????document.write(str); ?????????????????}) ?????????????} ?????????}) ?????} ?????ajax_test(); //执行函数 ?????//方法二: ?????//jQuery.getJSON()是jQuery.ajax()函数的简写形式. ?????// jQuery.getJSON( url [, data ] [, success ] ) ?????$.getJSON("ceshi.json", "", function(data) {  //each循环 使用$.each方法遍历返回的数据date ?????????$.each(data.first, function(i, item) { ?????????????var str = ‘<br/><div>姓名:‘ + item.name + ‘性别:‘ + item.sex + ‘</div>‘; ?????????????document.write(str); ?????????}) ?????}); ?????</script> ?????<title>ajax获取json测试</title> ?????</head> ?????测试 ?????<body> ?????</body> ?????</html> 
  • 效果

jQuery ajax读取本地json文件

原文地址:https://www.cnblogs.com/renxiuxing/p/9703009.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved