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中each循环的简单回滚操作
May 05 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现推拉门效果
Oct 19 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实现视频文件上传完整实例
2014/08/28 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python实现数字炸弹游戏程序
2020/07/17 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
高职教师岗位职责
2013/12/24 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
2014年母亲节寄语
2014/05/07 职场文书
劳动竞赛口号
2014/06/16 职场文书
狮子林导游词
2015/02/03 职场文书
辞职信如何写
2015/02/27 职场文书
教师党员自我评价2015
2015/03/04 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
思想工作总结范文
2015/08/12 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python