7.24-7.26 JLL实习日志-ajax+RestfulApi+Django-未完改进

1. 通过 ajax 修改 数据的 search功能，之前 是 进行 页面 跳转 现在优化 成 局部 页面 刷新的
   Ajax 前端代码 如下

  <script type="text/javascript">
   $(document).ready(function () {
   $('#a').click(function () {
    var filter_2 = $("#insert_value").val();
    var filter_1 = $("#display").val();
    var filter =  $('#filter').val();
  $.ajax({
        type: "GET",
        //data: {filter_value:filter, filter_1_value:filter_1,filter_2_value:filter_2},
         url: "https://horizon-retail-sam-leon-ghibli.c9users.io/restful_api/propertyviewset/?format=json",
       cache: false,
       dataType: "json",
       contentType : 'application/json',
       success: function (json) {
   //var data = JSON.parse(json);
      $('#change_ajax').empty();
       showTable(json);
       },
       error: function () {
           alert("false");
       }
      });
            });   
        });
        // create table by cycle 
        function showTable(data){
         var dataArray =data;
         var len = dataArray.count;
         var tableStr = '';
         tableStr = '<table id="footable-res2" class="demo" data-filter="#filter" data-filter-text-only="true" data-page-size="20" rules="rows"> <thead> <tr> <th data-toggle="true" ><b>{{ ui_setting.Property }}</b> </th><th data-hide="all"><b>    {{ ui_setting.Access_Nearest_IC }}</b> </th><th data-hide="all"><b>{{ ui_setting.Access_Nearest_Station }}</b> </th><th data-hide="phone"><b> {{ ui_setting.Province }}</b></th><th data-hide="tablet"><b>    {{ ui_setting.City }}</b></th><th data-hide="tablet" style="white-space:nowrap;"><b>{{ ui_setting.StreetAddress }} </b></th><th data-hide="tablet" style="white-space:nowrap;"><b>    {{ ui_setting.YearBuilt }} </b></th><th style="white-space:nowrap;"><b>    {{ ui_setting.PropertyStatus }}</b></th></tr></thead>'
     tableStr = tableStr+' <tbody data-link="row" id ="change_ajax">'
  for(var i=0;i<len;i++){      tableStr = tableStr+"<tr><td>" + '<a href="/property/view_detail/{{ property.id }}">'+dataArray.results[i].NameUnicode + "</td>" + "<td>" + dataArray.results[i].Access_Nearest_IC + "</td>" + "<td>" + dataArray.results[i].Access_Nearest_Station + "</td>"+ "<td>" + dataArray.results[i].Province + "</td>" +"<td>" +dataArray.results[i].City + "</td>" +"<td>" +dataArray.results[i].StreetAddress + "</td>" +"<td>" +dataArray.results[i].YearBuilt + "</td>" +"<td>" +'<span class="status-metro {% if property.AvailabilityCount < 1 %}status-disabled{% elif property.AvailabilityCount > 0 %}status-active{% else %}status-suspended{% endif %}" >'  +dataArray.results[i].PropertyStatus +' {% if property.AvailabilityCount < 1 %}{{ ui_setting.Unavailable }}{% elif property.AvailabilityCount > 0 %}{{ ui_setting.Available }}{% else %}{{ ui_setting.Suspend }}{% endif %}</span>'+ "</td></tr>";

            };
  tableStr = tableStr+'<tfoot><tr><td colspan="100%"><div class="pagination pagination-centered"></div></td></tr></tfoot></body></table>'
  $("#footable-res2").html(tableStr);
            $(function(){            $('table.demo').trigger('footable_initialize');
              });

        } 

    </script>

---

1. 需要 注意的点 有 下面 几个
   1.注意 ajax的格式 ，提交 url的 时候 需要 和 服务器说明 数据类型 ?format=json",不可以 漏掉，contentType : 'application/json', 表示 接收到 的 数据希望 的 类型 ，两种 是 存在 区别的
2. success: function (json) { 里面 json表示 传入 的 数据 是 json格式 的，和 respnonse这个参数 是有区别 的 ，前者传入 的只是 数据，response还有别的其他验证信息 ，
3. showTable(json); 函数 里面 显示 数据的信息 使用 的是json格式 的 ，
4. 需要 从 浏览器 中 得到 的 返回信息 ，确定 需要 取得 的 值 ，比如 dataArray.count; 和 dataArray.results[i] 注意有一个 result的 key值 ，
5. 因为 整个 table使用 的是bootstrap机制 ，所以需要 启动 $('table.demo').trigger('footable_initialize'); ，没有 启动 的标志是 一些 本该隐藏的 列 被暴露 出来了 <th data-hide="all"> 这样的标签 没有效果
6. var data = JSON.parse(json); 把 数据 传给 后端 ，然后得到返回的 数据，使用 的 url 地址 是当前的地址 ，有一种 一句话实现 整个 ajax的 感觉，写在 这个位置 会 把 从 ajax传过来 的数据 加上当前的 url 去 发出请求 去

---

未来 的改进部分，需要把 参数通过 ajax传输到 后端 ，实现filter的 功能，主要的工作量 应该在 怎么得到 data数据，在哪里写 函数 ，怎么把 数据 传到 前端 去 ？

       `