jQuery ajax 请求php遍历json数组到table中

html代码(test.html),js在html底部

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>test-jquery-ajax-list</title>
</head>
<body>
<div class="main">
   <table>
      <thead>
      <tr>
         <th>id</th>
         <th>name</th>
         <th>sex</th>
         <th>time </th>
      </tr>
      </thead>
      <tbody id="infolist">
      </tbody>
   </table>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      getList();
      function getList(){
         // jquery ajax 请求
         $.ajax({
            type:‘post‘, //请求方式,默认get
            url :"http://localhost/ajax-demo-list/test.php",
            data:{
               getFunction:1
            },success:function(data,status){
               $(‘#infolist‘).html(‘‘);
               $str = ‘‘;
               $.each(data.list,function(i,val){
                  $str = $str + ‘<tr>‘;
                  $str = $str + ‘<td> ‘+val.id+‘  </td>‘;
                  $str = $str + ‘<td> ‘+val.name+‘  </td>‘;
                  $str = $str + ‘<td> ‘+val.sex+‘  </td>‘;
                  $str = $str + ‘<td> ‘+val.time+‘  </td>‘;
                  $str = $str + ‘</tr>‘;
               });
               $(‘#infolist‘).append($str);
               if(data.list == "" ||  data.list.length < 0 || data.list == "undefined"){
                  $(‘#infolist‘).html(‘<td colspan="10"  style="height:200px;text-align:center;color: #23527c">暂无相关数据...</td>‘);
               }
            },error:function(data,statsu){
               alert("发送请求失败!");
            }
         });
      }
   });
</script>
</html>

php代码 (test.php)

<?php
header("Content-Type: application/json;charset=utf-8");
if($_REQUEST[‘getFunction‘]){
   getList();
}
function getList(){
   $data  = array(
      array(
         ‘id‘   => 1,
         ‘name‘ => ‘xiaoming‘,
         ‘sex‘  => ‘男‘,
         ‘time‘ => ‘2016年1月22日 14:45:46‘
      ),
      array(
         ‘id‘   => 2,
         ‘name‘ => ‘老张‘,
         ‘sex‘  => ‘男‘,
         ‘time‘ => ‘2016年1月22日 14:45:46‘
      ),
      array(
         ‘id‘   => 3,
         ‘name‘ => ‘捞王‘,
         ‘sex‘  => ‘男‘,
         ‘time‘ => ‘2016年1月22日 14:45:46‘
      )
   );
   $list  = json_encode(array(‘list‘=>$data));
   print_r($list);
   //    print_r(json_encode(array(‘list‘=>$data=array())));
}
时间: 2024-11-03 22:15:07

jQuery ajax 请求php遍历json数组到table中的相关文章

Jquery Ajax请求,返回JSON处理

$.ajax({     type:'post',     url:'/customize/control/servicesTicketServices',     data:{operFlag:'search'},     dataType:'json',     async:false,     success:function(returnValue){         // 处理成功,遍历返回值处理         var searchRTDataAry = eval(returnVal

jQuery ajax 传递JSON数组到Spring Controller

jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relationArrays=new Array();  //获取所有组的人员信息grid数据  var allGrid= $(".userGrid");  for(var i=0;i<allGrid.length;i++){    var rows=$(allGrid[i]).datagrid(&

jQuery Ajax 请求报长度过长的错误:Error during serialization or deserialization using the JSON JavaScriptSerializer

{"Message":"Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set 在web项目的web.config <configuration>节下增加 <system.web.extensions>    <scripting>    

jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是"application/json", (3)data传递的数据必须是严格的json数据,如"{'a':'aa','b':'bb'}",而且参数必须和静态方法的参数一 一对应 (4)aspx的后台方法返回的数据默认形式是"{'d':'返回的内容'}",所

Ajax请求php返回json对象数据中包含有数字索引和字符串索引,在for in循环中取出数据的顺序问题

//php中的数组数据格式 Array ( [all] => Array ( [title] => ALL [room_promotion_id] => all ) [best_available_rate] => Array ( [title] => Best Available Rate [room_promotion_id] => best_available_rate ) [30] => Array ( [room_promotion_id] =>

Ajax请求ashx 返回 json 格式数据常见问题

问题:ashx 返回的字符串json格式,在前台ajax自动解析失败. 问题分析:经过排查,发现是拼接json时出现” ’  “单引号,jquery无法解析,用” “ “双引号才可以.例如: string strjson="[ { 'userName':'test'}]"; //单引号导致jquery无法自动解析. string strjson="[ {\"userName\":\"test\"}]"; // 双引号可以解析:

jQuery ajax请求struts action实现异步刷新

第一步:导入相关jar包,本样例需导入struts相关jar包,json-lib.jar,gson-2.1.jar可以任意选择,但是这里需要都导入,因为为了做测试,两种jar包的转换方式都用到了. 第二步:配置web.xml <?xml version="1.0" encoding="UTF-8"?><web-app version="3.0" xmlns="http://java.sun.com/xml/ns/jav

jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示

1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实现 初次使用$.ajax() ,我没有去区分过ajax的异步请求和同步请求的不同,刚开始使用同步请求,以至后来出现许多问题,特别在体验度方面.异步和同步:同步意味着执行完一段程序才能执行下一段,它属于阻塞模式,其表现在网页上的现象是——浏览器会锁定页面(即所谓的页面假死状态),用户不能操作其它的,必

SpringMVC Ajax请求时返回json中文字符串的乱码问题的解决方案

1.org.springframework.http.converter.StringHttpMessageConverter类是处理请求或相应字符串的类,并且默认字符集为ISO-8859-1,所以在当返回json中有中文时会出现乱码. 2.StringHttpMessageConverter的父类里有个List<MediaType> supportedMediaTypes属性,用来存放StringHttpMessageConverter支持需特殊处理的MediaType类型,如果需处理的Me