如何使用AJAX显示数据?

2024-04-30

大家好,我在 ajax 中面临一个问题,我想将此数据显示为 html 中的表格,我如何提取此数据并以 html 表格形式显示它,它只是一个虚拟数据,否则它有很多对象加上嵌套对象帮我。

JSON 数据:

{
    "FullName":"shahrushabh",
    "description":"this is demo person register",  
    "Address1":"b\/1",
    "Area":"Sabarmati",
    "status":"active",
    "Thumb":"0",
    "checkbox":
    [
        {"ID":"1","UniqueID":"617993","Product":"electronics","Image":"617993\/alphansomangolips.jpg"},
        {"ID":"2","UniqueID":"617993","Product":"Home Decor","Image":"617993\/banana.jpg"}
    ]
}

阿贾克斯代码:

   <script>
       $(document).ready(function(){
           $.ajax({
            url:"<?php echo base_url()?>index.php/myad",
            type: 'GET',
            dataType:'json',
            success: function(data){
              var jsonobject = jQuery.parseJSON(data);
              alert("hi");
              $.each(jsonobject, function(key, value){
                console.log(value.FullName);
                $.each(value.checkbox , function(k, val){
                  console.log(val);
                })
              })
            }
           });
       });
    </script>

我从你的问题中假设你有嵌套对象,下面的代码是使用每个嵌套对象。

//Main loop
$.each(jsonObject, function(key, value){
  console.log(value.FullName);
  //Inner loop for check box for each user
  $.each(value.checkbox, function(k, val){
    console.log(val);
  })
});

请确保您已阅读官方each() https://api.jquery.com/each/在使用它之前。

EDIT

在迭代之前检查响应是否为数组。

if (!$.isArray(jsonObject)) {
    jsonObject = [jsonObject];
}

$.each(jsonObject, function(key, value){
  console.log("FULL NAME " + value.FullName);
  $.each(value.checkbox, function(k, val){
    console.log("ID" + " " + val.ID);
  });
});
var jsonObject = [
    {
      "FullName":"shahrushabh",
      "description":"this is demo person register",  
      "Address1":"b\/1",
      "Area":"Sabarmati",
      "status":"active",
      "Thumb":"0",
      "checkbox":
      [
          {"ID":"1","UniqueID":"617993","Product":"electronics","Image":"617993\/alphansomangolips.jpg"},
          {"ID":"2","UniqueID":"617993","Product":"Home Decor","Image":"617993\/banana.jpg"}
      ]
    },
    {
      "FullName":"shahrushabh",
      "description":"this is demo person register",  
      "Address1":"b\/1",
      "Area":"Sabarmati",
      "status":"active",
      "Thumb":"0",
      "checkbox":
      [
        {"ID":"1","UniqueID":"617993","Product":"electronics","Image":"617993\/alphansomangolips.jpg"},
        {"ID":"2","UniqueID":"617993","Product":"Home Decor","Image":"617993\/banana.jpg"}
      ]
    }
 ];

//console.log(jsonObject);
$.each(jsonObject, function(key, value){
  console.log(value.FullName);
  $.each(value.checkbox, function(k, val){
    console.log(val);
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用AJAX显示数据? 的相关文章

  • jquery:焦点到 div 不起作用

    ajax功能结束后 在成功消息中 我关注特定的 div 但这不起作用 我的代码在这里 j ajax url type POST data action press release page 0 do task do task id id m
  • 如何在 JSFiddle 中链接外部 json 文件?

    我有一个很长的 json 文件country json name WORLD population 6916183000 name More developed regions population 1240935000 name Less
  • 如何使用 jquery ajax 将锚点的值发送到 php

    我正在尝试使用 jquery 将几个锚点的值发送到 php 文件 但我没有从 php 脚本中得到回调 div class result div a href value class star Star 5 a a href value cl
  • jQuery 文件上传预览图像

    我正在使用 jQuery 文件上传插件 http blueimp github io jQuery File Upload http blueimp github io jQuery File Upload 用于我的网站的图像上传 我已经看
  • jquery:$().animate() 不是函数

    我已经做了很多搜索 但无法找到我的问题的答案 所以这里是 我正在尝试创建一个滑出切换菜单本教程 http alijafarian com jquery horizontal slideout menu 我收到一个错误slideoutMenu
  • 如何在Jquery-Select2中设置多值选择中的选定值?

    我正在绑定我的下拉菜单Jquery Select2 它工作正常 但现在我需要绑定我的多值selectBox通过使用Jquery Select2 我的下拉菜单 div class divright div
  • Jquery函数返回值

    我创建了一个函数来迭代 UL LI 这工作得很好 我的问题是将值返回给另一个变量 这可能吗 最好的方法是什么 谢谢 function getMachine color qty getMachine li each function var
  • 仅使用 Jquery 验证的字母

    我尝试了文章中的每个解决方案one https stackoverflow com questions 4115372 jquery validate plugin adding a custom validator to accept l
  • 使用 Fancybox2 从多张预览图片启动一个画廊

    我正在启动一个包含多张预览图片 链接 的画廊 第一个开始图库 下一个进入同一图库中的特定照片 但如果您选择 可以单击整个图库 将其视为一个已设置的书签 可将您带到一个较大图像库的不同点 我现在已经复制了这对我来说是如何工作的 尽管它是多余的
  • 如果元素隐藏则忽略 .NET 验证器(显示:无)

    我们经常在使用 javascript css 隐藏的元素 即 display none 上使用 NET 验证器时遇到问题 例如 可能有语法错误 但不用担心
  • 调用“DOMNodeInserted”事件时添加元素

    我想在每个 喜欢 按钮 chrome 扩展 之后添加一个元素 由于帖子被添加到新闻提要而不刷新页面 我必须添加一个事件侦听器 DOMNodeInserted 但是当我尝试把after 里面的功能 它不起作用 Code contentArea
  • 如果我拒绝确认,如何防止更改选择框值

    我正在使用国家 地区选择框 当用户选择一个国家 地区时 会出现添加分支链接 并且用户在该国家 地区下添加分支 但是当用户想要更改国家 地区时 则应销毁有关该国家 地区的所有分支 在更改国家 地区之前 会出现一个确认框并显示警告 一切正常 但
  • 在 WCF 服务上启用 CORS。获取 HTTP 405:不允许的方法

    我正在尝试在 WCF 服务上启用 CORS 当我尝试从客户端发送请求时 该请求是使用OPTIONS动词 我总是得到一个HTTP 405 Method not allowed error 如果我尝试使用 Fiddler 并使用以下命令创建相同
  • 如何向 jQuery Tokeninput 添加占位符?

    如何将占位符添加到 jQuery Tokeninput 字段 一个正常的placeholder属性在这里不起作用 对于这样的输入
  • 计算Javascript中两次点击之间的时间

    我想用 javascript 计算属性的两次点击之间的时间 但我不知道如何 例如 a href click here a 如果用户单击多次 假设 5 秒内 我想显示警报 如果有帮助的话我正在使用 jQuery 我对 javascript 不
  • 如何使用 jQuery 向表中添加新行,并为其分配递增的 id

    我有一个现有的 HTML 表格 它是用户输入 GPS 点的表单的一部分 用户还可以选择上传 GPS 数据点 我想要一个用户可以按下的按钮 其中一些 Javascript 会向表中添加一个或多个新行 但新行必须继续增加表中使用的名称和 id
  • 使用 jquery 将字符串数组转换为整数

    我正在尝试将 jquery 中的字符串数组转换为整数数组 这是我的尝试 var cdata data values split each cdata function i l l parseInt l 我认为在这种情况下你不需要使用 Jqu
  • 将杂散文本包裹在 div 中

    如何选择 任何没有包含标签的内容 来在 jQuery 中添加包装器 前任 div class post div class whatever This should remain untouched div I want to wrap t
  • 如何在网页上实现文件上传进度条?

    当用户将文件上传到我的网络应用程序时 我想显示比动画 gif 更有意义的内容 我还有哪些可能性 编辑 我正在使用 Net 但我不介意是否有人向我展示与平台无关的版本 如果您对这一切在客户端通常如何工作感兴趣 就是这样 所有解决方案都通过 J
  • Jquery:选择菜单以显示和隐藏某些div元素

    我正在创建一个选择菜单 根据所选选项显示和隐藏某些 div 像这样的东西

随机推荐