前端学习2——深入ajax和restful

    <div class="row">
      <div class="span12">
        <table class="table table-hover" id="ledsTable">
          <thead>
            <tr>
              <th>编号 ID</th>
              <th>描述 DESC</th>
              <th>状态 STATUS</th>
              <th>动作 ACTION</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>

    function updateAll() {
    // 动态表格内容
    $.getJSON(‘http://localhost/api/leds‘,function(data){
     
      // data.total 表示记录总数
      // data.row 表示记录内容
      console.log(data.total);
   
      $.each( data.rows , function( index , item){
        // 取出 id description status
        var id = item.id; console.log(id);
        var description = item.description; console.log(description);
        var status = item.status; console.log(status); console.log(status);
     
        var btnStyle = ‘btn-success‘;
        var btnText;
        // 修改按钮样式，ON为绿色 OFF为白色
        if( status == ‘on‘){
          btnStyle = ‘btn-success‘;
          btnText = ‘O N‘;
        } else {
          btnStyle = ‘btn-default‘;
          btnText = ‘OFF‘;
        }
       
        // 插入一行，很遗憾 javascript没有 format
        var newRow = ‘<tr dev_id="‘ + id + ‘">‘ +
              ‘<td>‘ + id + ‘</td>‘ +
              ‘<td>‘ + description + ‘</td>‘ +
              ‘<td>‘ + status + ‘</td>‘ +
              ‘<td>‘ +
                ‘<button type="button" class="btn btn-xs ‘ + btnStyle + ‘">‘ + btnText + ‘</button>‘ +
              ‘</td>‘ +
            ‘</tr>‘;
        $(‘#ledsTable‘).append(newRow);
       
      });
     
    });
    }

    $("table").delegate("button", "click", function(){
   
      console.info($(this));
      // 尝试获得 <button>text</button>
      console.log($(this).text());
      var $tr_obj = $(this).parent().parent();
     
      // tr元素中包含 dev_id属性
      var dev_id = $tr_obj.attr(‘dev_id‘);
      console.log( dev_id );
     
      // 访问该tr元素的所有子td元素
      var $td_obj = $($tr_obj).children("td");
   
      // 所有td元素的第二个
      var $status_obj = $($td_obj).eq(2);
      var status_str = $status_obj.text();
      console.log(status_str);
     
      // 改变按钮样式
      if( status_str == "on"){
        $(this).removeClass(‘btn-success‘);$(this).addClass(‘btn-default‘);
        $(this).text("OFF");
        $status_obj.text("off");
        send_ledctrl( dev_id , "off");
      }else{
        $(this).removeClass(‘btn-default‘);$(this).addClass(‘btn-success‘);
        $(this).text("O N");
        $status_obj.text("on");
        send_ledctrl( dev_id , "on" );
      }
     
    });
    function send_ledctrl(dev_id, cur_status){
      $.ajax({
        url: ‘/api/leds/‘ + dev_id + ‘/status‘, // /api/leds/1
        async: true,
        dataType: ‘json‘,
        type: ‘PUT‘,
        data: JSON.stringify({status:cur_status}),
       
        success: function(data, textStatus){
          // 打印返回内容 {"success":true}
          console.log(data.success);
        },
       
        error: function(jqXHR, textStatus, errorThrown){
          console.log("error");
        },
       
      });
    }

前端学习2——深入ajax和restful,布布扣,bubuko.com

前端学习2——深入ajax和restful

原文：http://blog.csdn.net/xukai871105/article/details/20399661