ajax返回函数json数据如何取值问题

最新推荐文章于 2023-10-03 15:44:05 发布
最新推荐文章于 2023-10-03 15:44:05 发布
阅读量1.8k 收藏 6
点赞数 1
分类专栏： js 
[
  {
    "name":"张国立",
    "sex":"男",
    "email":"zhangguoli@123.com",
    "url":"./img/1.jpg"
  },
  {
    "name":"张铁林",
    "sex":"男",
    "email":"zhangtieli@123.com",
    "url":"./img/2.jpg"
  },
  {
    "name":"邓婕",
    "sex":"女",
    "email":"zhenjie@123.com",
    "url":"./img/3.jpg"
  },
  {
    "name":"张国立",
    "sex":"男",
    "email":"zhangguoli@123.com",
    "url":"./img/4.jpg"
  },
  {
    "name":"张铁林",
    "sex":"男",
    "email":"zhangtieli@123.com",
    "url":"./img/5.jpg"
  },
  {
    "name":"邓婕",
    "sex":"女",
    "email":"zhenjie@123.com",
    "url":"./img/6.jpg"
  }
] 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <style type="text/css">

        .p1{
            font-size: 14px;
            color: #000;
        }
        .p2{
            font-size: 12px;
            color: #b0b0b0;
        }
        .p3{
            font-size: 14px;
            color: #ff5f19;
        }
        .product{
            width:100%;
            position: relative;
            margin: 20px 0 5px 0;
            height: 100px;
            background: #fafafa;
        }

        .img{
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 20px;
        }
        .p{
            display:inline-block;
            float:left;
            width:50%;
            margin-top:6px;
            font-family: Microsoft YaHei;
        }
        .p1{
            margin-top:16px;
        }



    </style>
    <script>
        //页面加载   获取全部信息
        $(function(){
            $.ajax({
                type: "POST",//请求方式
                url: "item.json",//地址，就是json文件的请求路径
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
　　　　　　　　　 success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
                    addBox(result);
                }
            });
            /*$.get("item.json",function(result){
                //result数据添加到box容器中;
                addBox(result);
            });*/
        });
        function addBox(result){
            //result是一个集合,所以需要先遍历
            $.each(result,function(index,obj){
                $("#box").append("<div class='product'>"+//获得图片地址
                    "<div><img class='img' src="+obj['url']+"/></div>"+
                    //获得名字
                    "<div class='p1 p'>"+obj['name']+"</div>"+
                    //获得性别
                    "<div class='p2 p'>"+obj['sex']+"</div>"+
                    //获得邮箱地址
                    "<div class='p3 p'>"+obj['email']+"</div>"+
                    "</div>");
            });
        }
    </script>
</head>
<body>
<!-- 构建装一个容器 -->
<div id="box">
</div>
</body>
</html>
Crazy2374164283
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax返回的json遍历取值并显示到前台的方法
10-18
在这个例子中，`success`回调函数接收一个参数`data`，它包含了从服务器返回的JSON数据。通过`$.each()`方法，我们可以遍历`data`中的每个对象（假设它是一个数组）。在循环内部，`result`变量代表当前遍历到的对象...
Ajax 获取 JSON数据
梁辰兴的博客
11-22 6942
Ajax 全称“Asynchronous JavaScript and XML”，译为“异步 JavaScript 和 XML”，程序员们习惯称之为“阿贾克斯”，通过 Ajax 我们可以异步在服务器与客户端之间传递数据。在 Ajax 中，普遍使用 JSON 作为传输数据的格式。一般情况下，我们可以通过 JavaScript 来发送 Ajax 请求，并接收响应的信息。//发送 Ajax 请求，适用于 Chrome, mozilla 等浏览器。// 发送 Ajax 请求，适用于 IE 浏览器。
AJAX跨域请求获取JSON数据
06-10 2099
要了解 JSONP，不得不提一下 JSON，那什么是 JSON？JSONP(JSON with Padding) 是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。
Ajax获取 Json文件提取数据
bangweixiao1238的博客
07-21 1108
摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":"男", "email":"zhangguoli@123.com", "url":"./img/1.jpg" }, { "name":"张铁林", "sex":...
ajax怎么取php里面json数据,ajax读取Json数据的方法
weixin_34551614的博客
03-28 1053
这次给大家带来ajax读取Json数据的方法，ajax读取Json数据的注意事项有哪些，下面就是实战案例，一起来看一下。本文给大家分享一下，如何使用ajax读取Json中的数据。一、基础知识什么是json？JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)JSON 是轻量级的文本数据交换格式JSON 独立于语言 *JSON 具有自我描述性，更...
一个简单的模拟ajax如何获取json数据的实例
siyi_blog的博客
07-19 1万+
自己写了一个模拟数据文件queryList.json，表单中的内容都是数据循环出来的，在本实验中需要引入jquery文件，下面简单展示如何用jq的ajax获取json数据。   先看效果图：  queryList.json { "animals":[ { "id":1, "name":"dog", "age":3 }, { "id":
AJAX如何接收JSON数据示例介绍
10-27
上述代码中，$.ajax方法发起请求到"JSON.aspx"，并期望服务器返回JSON格式的数据。成功回调函数中，我们使用$.each方法遍历返回的JSON对象数组，并输出每个对象中的labId和labName属性。 此外，我们还可以使用$.get...
ajax获取json数据为undefined原因分析
10-18
然而，有时在使用Ajax获取JSON数据时，可能会遇到返回结果为`undefined`的问题。这个问题通常出现在尝试访问JSON数据的属性时，但数据并没有正确解析或转换为JavaScript对象。以下是对这一问题的深入分析和解决方法...
jQuery使用ajax方法解析返回的json数据功能示例
10-20
在使用$.ajax()方法时，如果需要处理服务器返回的JSON数据，可以设置dataType为"json"。jQuery会自动将返回的JSON字符串转换为JavaScript对象。但如果服务器返回的不是标准的JSON字符串，或者有特殊的格式要求，那么...
AJAX跨域请求json数据的实现方法
12-11
总结来说，JSONP通过动态插入`<script>`标签来实现跨域请求，它依赖于服务器能够正确处理回调函数参数并返回包裹在回调函数内的JSON数据。这种方式在早期广泛应用于跨域数据交互，但现在更多地被CORS（Cross-Origin ...
Ajax的三种实现及JSON解析
03-24
NULL 博文链接：https://bing-zz.iteye.com/blog/1118728
AJAX跨域请求获取JSON数据的方法
最新发布
xinyuerr的博客
10-03 302
要了解 JSONP，不得不提一下 JSON，那什么是 JSON？JSONP(JSON with Padding) 是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。
$.ajax()方法从服务器获取json数据几种方式详解
热门推荐
Sun9528的博客
06-10 7万+
对$.ajax()方法从服务器获取json数据的几种方式进行详解
$.ajax()方法从服务器获取json数据
Warship_的博客
04-04 887
一．什么是jsonjson是一种取代xml的数据结构，和xml相比，它更小巧但描述能力却很强，网络传输数据使用流量更少，速度更快。json就是一串字符串，使用下面的符号标注。{键值对} ： json对象[{},{},{}] ：json数组"" ：双引号内是属性或值: ：冒号前为键，后为值（这个值可以是基本数据类型的值，也可以是数组或对象），所以 {"age": 18} 可以理解为是一个包含age为...
前端Ajax以JSON格式获取后台数据
03-14 3937
最近在用Thymeleaf做一个项目，耳边总是飘过前后端分离的话语，不得不去了解一下，在Thymeleaf里如何获取后端的json串，这里进行详细的讲解一下（困扰了我好久/哭了） 首先我们需要一个Controller，这个Controller用于视图的跳转，也就是走视图解析器的，当你访问一个网址时，他给你跳转到一个页面 当我们访问http://localhost:8080/hello的时候，会跳转到hello.html页面，我们写一个hello.html页面 这里的json就是从那个url里获取的，我们需要
ajax获取json数据示例
MyBlog
05-25 2141
使用ajax请求数据时，可以先封装ajax function querystring(obj) { var str = ""; for (var arr in obj) { str += arr + "=" + obj[arr] + "&"; } return str.substring(0, str.length - 1); } function $ajax({ method = "get", url, data,
Ajax获取json的返回值
咖喱辣椒
02-21 6429
看json的返回的相应报文 2019-02-21 15:19:52 INFO HttpClientToolImpl:57 - 响应报文JSON{“errorCode”:“0”,“errorMsg”:“成功”,“data”:{“contectList”:[{“id”:64,“userId”:123534,“name”:&amp;quot;&amp;quot;,“mobile”:null,“contactFlag”:null,“add...
利用Ajax获取JSON数据
qUEAIAi的博客
09-27 1223
JSON对象与JSON字符串的相互转换 //JSON对象 属性名必须使用双引号包起来 var obj={"a":1,"b":2}; var ary=[{"a":1,"b":2},{"a":10,"b":20},{"a":100,"b":200}]; //JSON字符串:将JSON对象使用''包起来 var str1='{"a&quot
Ajax异步请求，获取本地json数据
m0_73341533的博客
03-13 2336
Ajax的核心是XMLHttpRequest对象。2、jQuery的Ajax请求。
ajax返回数据json
05-20
当使用 AJAX 技术从服务器获取数据时，可以使用 JSON 格式来返回数据。JSON 是一种轻量级的数据交换格式，易于阅读和编写。以下是一个使用 AJAX 返回 JSON 数据的示例： ```javascript $.ajax({ url: "example.php", type: "POST", dataType: "json", success: function(data) { // 处理返回的 JSON 数据 console.log(data); }, error: function(jqXHR, textStatus, errorThrown) { // 处理 AJAX 请求失败的情况 console.log("AJAX Error: " + textStatus + ", " + errorThrown); } }); ``` 在这个示例中，我们使用 jQuery 的 AJAX 方法来发送一个 POST 请求到 "example.php" 页面，并且指定了返回的数据类型为 JSON。当请求成功时，我们使用 success 回调函数来处理返回的 JSON 数据。如果请求失败，则使用 error 回调函数来处理错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值