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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 跨域请求之jQuery的ajax jsonp的使用解惑

    跨域请求之jQuery的ajax jsonp的使用解惑

    直接执行了error方法提示错误--ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解:出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解.于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下! 首先,贴出可以成功执行的代码: (页面部分) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

  • jQuery Ajax异步处理Json数据详解

    先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: 复制代码 代码如下: $("button").click(function(){  $.getJSON("demo_ajax_json.js",function(result){    $.each(result, function(i, field){      $("div").append(field + " ");    });  });

  • JQuery处理json与ajax返回JSON实例代码

    一.JSON的一些基础知识. JSON中对象通过"{}"来标识,一个"{}"代表一个对象,如{"AreaId":"123"},对象的值是键值对的形式(key:value). "[]",标识数组,数组内部各个数据之间通过","分割,如["AreaId":"123","AreaId":"345"]. 很多情况下是

  • jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于"名称"和"值"的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现. 下面就使用jQuery读取music.txt文件中的JSON数据格式信息. 首先,music.txt中的内容如下: 复制代码 代码如下: [ {"optionKey":"1"

  • JQuery的ajax获取数据后的处理总结(html,xml,json)

    1.html处理比较简单,直接输出即可.一般用$("jb51div").innerHTML等即可 2.json格式数据调用 复制代码 代码如下: $.ajax({ url : "/trundle/RawContentAction.getAjaxContent.act", data : "param1=22", dataType : "json",//这里的dataType就是返回回来的数据格式了html,xml,json ca

  • 基于jQuery的AJAX和JSON实现纯html数据模板

    基于jQuery的AJAX和JSON实现纯html数据模板

    通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"> <tr> <th> 订单ID</th> &

  • 详谈 Jquery Ajax异步处理Json数据.

    详谈 Jquery Ajax异步处理Json数据.

    所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上 [WebMethod]) [WebMethod] public static string ABC(string ABC) { return ABC; } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • jQuery中ajax请求后台返回json数据并渲染HTML的方法

    html实例 <table border="0" class="restaurant_food" cellspacing="0" cellpadding="1"> <input type="text" name="dishes" value="" class="seek_product" placeholder="请输入

  • jquery ajax跨域解决方法(json方式)

    最近公司开发的项目中很多地方需要跨域ajax请求,比如几个子域名下 http://a.****.com/index123.aspx, http://b.****.com/index2.aspx 都要请求用户json信息,然后再对数据进行处理,起初我和同事们试了很多种方法,使用$.ajax() 无论是get或post方法都会引起uri deny的错误.一番GG之后发现了解决方法,也了解其中的原因. jquery从1.2开始,.getJSON就支持跨域操作了.使用jquery.getJSON()方法

  • jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

随机推荐