基于jQuery的AJAX和JSON的实例解说

首先给大家展示的是ajax 常用的方法之一

这就是表结构(可无视)

基于jQuery的AJAX和JSON的实例解说

 

展示一段标准的JSON数据,解析自上面的数据库

  1. {"code":200,"extend":{"pageInfo":{"endRow":3,"firstPage":1,"hasNextPage":false,"hasPreviousPage":false,"isFirstPage":true,"isLastPage":true,"lastPage":1,"list":[{"roles_id":1,"roles_mark":"最高权限者","roles_name":"管理","user_status":0},{"roles_id":2,"roles_mark":"网站的内容编辑者","roles_name":"编辑","user_status":1},{"roles_id":3,"roles_mark":"会员","roles_name":"会员","user_status":2}],"navigateFirstPage":1,"navigateLastPage":1,"navigatePages":5,"navigatepageNums":[1],"nextPage":0,"pageNum":1,"pageSize":5,"pages":1,"prePage":0,"size":3,"startRow":1,"total":3}},"msg":"处理成功"}

 

通过jQuery内置的AJAX功能,最后把roles_name处理出来了。(注:只是一种简单的方式)

  1. <script type="text/javascript">
  2. $(function(){
  3.     $.ajax({
  4.         dataType: "json",//返回json格式的数据
  5.         type:"get",//使用get方法访问后台
  6.         url:"${PATH }/roles/admin-role",//要访问的后台地址
  7.         data:"page=1",// 要发送的数据,这里我是页面第一页。
  8.         success:function(result){ //这里成功后result为返回的数据,在这里做数据绑定。
  9.             //console.log(result);
  10.             admin_role_table(result);
  11.         }
  12.     });
  13. });
  14. function admin_role_table(result){
  15.     var rolesresult.extend.pageInfo.list;
  16.     $.each(roles,function(index,item){
  17.         alert(item.roles_name);
  18.     });
  19. }
  20. </script>

下面这段要了解。
       ${PATH }/roles/admin-role :就是获取JSON数据的链接

就是比如 http://www.javar.cc/roles/admin-role

下面这段就是JSP中解决相对路径的问题,可返回站点的根路径。

  1. <%  
  2.     pageContext.setAttribute("PATH",request.getContextPath());
  3. %> 

 

jQuery 遍历 - $.each()  :  这个就是jQuery的遍历方式,不了解的就当for循环

roles:自定义的对象储存。

item.roles_name: 这里最后遍历后的值 管理,编辑,会员

 

腾讯云服务器安全可靠高性能,多种配置供您选择
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: