首页 > 软件开发 > JQUERY >

ajaxj获取到的数据怎么放入表格中

来源:互联网 2023-03-17 00:47:13 版权归原作者所有,如有侵权,请联系我们

我们经常使用ajax来获取远程数据,然后把数据显示在网页上的,如果你获取到的数据需要放入表格中,你知道怎么操作吗?下面来看一下。j09办公区 - 实用经验教程分享!

方法/步骤

  • 1

    为了方便dom操作,我们使用jquery插件库,所以先引入jquery脚本。j09办公区 - 实用经验教程分享!

    ajaxj获取到的数据怎么放入表格中j09办公区 - 实用经验教程分享!

  • 2

    在html里我们先创建一个表格,表格只有一个表头,然后有一行数据。j09办公区 - 实用经验教程分享!

    ajaxj获取到的数据怎么放入表格中j09办公区 - 实用经验教程分享!

  • 3

    然后在ajax调用里,在success回调里把数据显示在表格里。j09办公区 - 实用经验教程分享!

    ajaxj获取到的数据怎么放入表格中j09办公区 - 实用经验教程分享!

  • 4

    我们的逻辑是先循环ajax返回来的数据。j09办公区 - 实用经验教程分享!

    ajaxj获取到的数据怎么放入表格中j09办公区 - 实用经验教程分享!

  • 5

    在循环里,把数据格式化为一个tr,td的html字符串,然后放到我们上面定义的数组变量里。j09办公区 - 实用经验教程分享!

    ajaxj获取到的数据怎么放入表格中j09办公区 - 实用经验教程分享!

  • 6

    然后把这个字符串数组拼接后(join方法),通过jquery的append插入到表格的最后面。(假设返回的数据json格式如注释的一样,是三个对象,)j09办公区 - 实用经验教程分享!

    ajaxj获取到的数据怎么放入表格中j09办公区 - 实用经验教程分享!

  • 7

    我们运行页面,等到ajax调用返回后,可以看到页面的表格就插入了这三行数据了。j09办公区 - 实用经验教程分享!

    ajaxj获取到的数据怎么放入表格中j09办公区 - 实用经验教程分享!

  • 7
  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!j09办公区 - 实用经验教程分享!


    标签: 软件HTMLJQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号