jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例


Posted in jQuery onJune 02, 2020

本文实例讲述了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作。分享给大家供大家参考,具体如下:

1、先给json格式的数据:

[
{"id":1,"name":"stan"},
{"id":2,"name":"jack"},
{"id":3,"name":"lucy"},
{"id":4,"name":"mary"},
{"id":5,"name":"jerry"},
{"id":6,"name":"tom"}
]

2、通过访问html页面,获取并展示数据:

方法一:

<!DOCTYPE html>
<html>
 <head>
 <title></title>
 </head>
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <body>
 <div id="test">
 
 </div>
 <script type="text/javascript">
  window.οnlοad=function(){
  //js代码请求
  }
  $(function(){
    $.ajax({
   method:"post",
   url:"http://localhost:81/getpersons",/*这里要写nginx访问的全路径*/
   data:{},
   dataType: "json",
   success: function(data){
    var str="<ul>";  
    $.each(data,function(i,items){   
    str+="<li>"+"ID:"+items.id+"</li>";
    str+="<li>"+"姓名:"+items.name+"</li>"; 
    });         
    str+="</ul>";   
    $("div").append(str); 
   }
   
  });
 
  })
 </script>
 </body>
</html>

方法二:

<!DOCTYPE html>
 
<html>
 <head>
 <title></title>
 </head>
 
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <body>
 <div id="test">
  <table border="1" cellspacing="1" cellpadding="1" id="a1">
         
  </table>
 </div>
 
 <script type="text/javascript">
  window.οnlοad=function(){
 
  //js代码请求
  }
  $(function(){
    $.ajax({
   method:"post",
   url:"http://localhost:81/getpersons",/*这里要写nginx访问的全路径*/
   data:{},
   success: function(data){
   alert(data);
   //将json数据转换
   dd=eval("("+data+")");
 
   var htmls;
   for(var i=0;i<dd.length;i++){
     htmls="<tr>+<td>"+"id: "+dd[i].id+"</td>+<td>"+"name :"+dd[i].name+"</td>+</tr>";
     $("#a1").append(htmls);
   }
   }
   
  });
 
  })
 </script>
 </body>
</html>

更多关于jQuery相关内容可查看本站专题:《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 #jQuery
JQuery获得内容和属性方法解析
May 30 #jQuery
jQuery实现视频展示效果
May 30 #jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 #jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 #jQuery
You might like
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
Python FFT合成波形的实例
2019/12/04 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
公司成立感言
2014/01/11 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
TS 类型兼容教程示例详解
2022/09/23 Javascript