澳门皇家赌场网站jQuery异步获取json数据方式汇总,通过ajax请求获取后台数据展现在表格上的章程

1、引入bootstrap和jquery的cdn

jQuery异步获取json数占领贰种方法,三个是$.getJSON方法,2个是$.ajax方法。本篇体验使用那二种艺术异步获取json数据,然后追加到页面。

JqueryMobile动态生成listView并落到实处刷新的二种艺术

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="external nofollow" >
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script>

在根目录下创建data.json文件:

复制代码 代码如下:

2、html部分

复制代码 代码如下:

function queryEntfernungen(tx, results)
   alert(“This Hello works”);
   var len = results.rows.length;
     // This For works fine

<table class="table table-bordered" id='tabletest'>
 <tr>
  <th>名字</th>
  <th>开始时间</th>
  <th>是否真实</th>
  <th>设备</th>
 </tr>
 </table>

{
    “one” : “Hello”,
    “two” : “World”
}

    for (var i = 0; i < len; i++) {
       $(“div[data-role=content] ul”).append(‘<li><a
href=”‘+results.rows.item(i).name+'”>’+results.rows.item(i).name+'</a></li>’);
    }
   $(“div[data-role=content] ul”).listview(‘refresh’); // This also
works

3、js部分

■ 通过$.getJSON方法得到json数据

而是下边包车型地铁点子却也能打响!

1>使用for in

复制代码 代码如下:

复制代码 代码如下:

$(function(){
 $.ajax({
  url:'data.json',
  type:'get',
  dataType:'json',
  success:function(data){
   //方法中传入的参数data为后台获取的数据
   for(i in data.data) //data.data指的是数组,数组里是8个对象,i为数组的索引
   {
    var tr;
    tr='<td>'+data.data[i].name+'</td>'+'<td>'+data.data[i].startTime+'</td>'+'<td>'+data.data[i].is_true+'</td>'+'<td>'+data.data[i].device+'</td>'
    $("#tabletest").append('<tr>'+tr+'</tr>')
   }
  }
 })
})


 ***注意**** for in 通常用于对象
  遍历数组的两种方法(each,foreach):

  $.each(arr,function(index,item){})

  arr.forEach(function(item,index))

 // arr为数组 ,index索引,item为当前值

    <script src=”Scripts/jquery-2.1.1.min.js”></script>
    <script type=”text/javascript”>
        $(function() {
            $.getJSON(‘data.json’, function(data) {
                var items = [];
                $.each(data, function(key, val) {
                    items.push(‘<li id=”‘ + key + ‘”>’ + val +
‘</li>’);
                });
                $(‘<ul/>’, {
                    ‘class’: ‘list’,
                    html: items.join(”)
                }).appendTo(‘body’);
            });
        });
    </script>

function query(tx, results) {

2>each方法

澳门皇家赌场网站 1 

    var len = results.rows.length, i, j;

$(function(){
    $.ajax({
   url:'data.json',
   type:'get',
   dataType:'json',
   success:function(data){
    $.each(data.data,function(index,item){
     var tr;
     tr='<td>'+item.name+'</td>'+'<td>'+item.startTime+'</td>'+'<td>'+item.is_true+'</td>'+'<td>'+item.device+'</td>';
     $("#tabletest").append('<tr>'+tr+'</tr>')
    })
   }
})})

■ 通过$.ajax方法得到json数据

    for (i = 0; i < len; i++) {
        $(“div[data-role=content] ul”).append(‘<li><a
href=”‘+results.rows.item(i).name+'”>’+results.rows.item(i).name+'</a></li>’);
    }
// No listview(“refresh”) !!

总结:取得对象属性的方法:item.name或item[‘name’]

复制代码 代码如下:

    for (j = 0; j < len; j++) {
        $(“#selectmenu”).append(‘<option
value=”‘+results.rows.item(j).id+'”>’+results.rows.item(j).name+'</option>’);
    }
    $(“#selectmenu”).selectmenu(‘refresh’, true);

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图