如何重构这个重复的jquery ajax模式?

时间:2018-02-08 01:59:16

标签: javascript jquery html ajax refactoring

我收到了这个复杂的基于jquery的ajax结构。

$.ajax({
  url: ("example/example.php"),
  type: "post",
  data: {
    data1 = datafromphp_1;
    data2 = datafromphp_2;
  }
  dataType: "json",
},
success: function (datafromphp_2){
  return function(datafromphp_2){
    $.ajax({
         // Same structure as outer structure
      success: function (){
           $.ajax({
               // same structure as outer structure. The structure is recursively repeating.  
             success: function(){
               // The structure is recursively repeating..
               // Some complicated embedded html strings with jquery.
               // Each ajax makes cells dynamically. Further inner ajax codes make smaller cells in each cells made by outer ajax codes.

             }
           }); 
      }
    });
  };
  }(datafromphp_2)
});

客户应该在这样的浏览器上看到什么。   enter image description here

每个细胞都必须动态生成。如果服务器上没有数据,浏览器必须不显示任何内容。要动态生成单元格,jquery代码就像这样实现。

$("<label>").text("this is label example),$(input type = 'text' name='cell0' style = blablabla...), ("other html codes to decorate cell"), ... , ...

所以即使是CSS,php,html和javascript(.js)文件也是分开的,javascript文件太大了,看起来像其他html代码!极端地,用于实现此视图的一个js文件具有20次制表符和嵌套块结构。

有没有办法简化这些结构?我无法找到适当的解决方案来重构这个。

0 个答案:

没有答案