弹性盒模型与流式布局

在web开发中,很多时候会用到ajax,来满足一部分功能,或者达到更好的用户体验

图片 1

介绍:做一个量化投资的实时系统。

但是在web开发时,不好测试ajax是否正常,它是用js发送ajax请求,页面不会刷新,也可能不会报错

  这是一个常见的页面布局,Header→Body→Footer,中间Body包含两到三列,重要内容放置在html靠前位置,优先加载,html代码如下:

综合:

通过检测HTTP协议来测试结果

<div class="wrapper">
    <header>Header</header>
    <article>
        <div class="main">Main</div>
        <aside class="aside">Aside</aside>
        <aside class="sub">Sub</aside>
    </article>
    <footer>Footer</footer>
</div>

添加记录,顺序改变的话,refresh之后,能正常刷新吗?可以正常刷新,只是顺序又变回去。

ajax在发送请求时,就是发送一个http请求

  如果使用传统的CSS来实现,比较麻烦,得使用float,margin负值,但是采用CSS3一个新增属性——display:box后,一切问题,迎刃而解。我们先看相关文档(飘零雾雨
CSS3手册):

express中用fs readfile
时,需要用path.join来写路径,如果用路由的话,会读出来数字。
json的读取和存储,JSON.parse(data);会变为一个json对象;
JSON.stringify(data);把json变为字符串,如果这时候写入.json中,则不会有合适
的缩进。所以需要JSON.stringify(data, function(key, value){return
value;}, 4)。多亏了我扎实的基本功,看过的书幸好没有忘记。
不过感觉stringify函数有一点不好的地方,如果不写第二个参数(函数)的话,就不行的,它不会识别一下第二个不是function,直接把它看为第
三个参数吗?

这里用Chrome浏览器来监测

图片 2

data.constructor–可以看出函数的类型。不要什么都看做object

1、发送一个ajax请求

  实现的CSS代码,左右定宽,中间自适应的流式布局,html、css代码量极少。

mac上fq,得要blcu的才可以。如果用360WiFi的话,用同一个application会有问题。

        var url = '?c=mail&a=delete&id=' + id;
 $.getJSON(url,function(json){//或者其他请求方式比如$.post等
  if(json['status'] == 1) {//测试期间最好的输出
   document.location.reload();
  } else {
   alert(json['msg']);
  }
 });
header{ height:100px; margin-top: 10px; border: 1px solid #000;}
article{ height:300px; margin-top: 10px;}
footer{ height:50px; margin-top: 10px; border: 1px solid #000;}
article{ display:-webkit-box; display:-moz-box; display:box; width: 100%;}
.aside{ width: 150px; border: 1px solid #f00; -webkit-box-ordinal-group:0; -moz-box-ordinal-group:0; box-ordinal-group:0;}
.main{ -webkit-box-flex:1; -moz-box-flex:1; box-flex:1; -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; box-ordinal-group:1; margin: 0px 10px; border: 1px solid #f00;}
.sub{ width: 200px; border: 1px solid #f00; -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2; box-ordinal-group:2;}
var item = {};  for(var i=0; i<keys.length; i++){      (function(num){          console.log('num:'+num);          item['id'] = num;          item['reqstr'] = keys[num];          result_array.push(item);          console.log('result_array:'+JSON.stringify(result_array));      })(i);   }   //会出现类似闭包的情况,需要把item初始化写在闭包内。

2、php端,处理ajax请求,在PHP端的输出信息,会在ajax请求后显示出来

  box-flex:<number>,number为任意数字,默认为0。意思为子元素按照父元素剩余空间分配比例,number即为比例数。两个aside的宽度分别为150px、200px,article剩余空间分配给main,如果article宽设为100%,即为流式布局。

Linux下是/,win7中是\\。表示路径的方式不同。

这是用Chrome监测到的http请求数据

  box-ordinal-group:<number>,元素按number值显示,数值较低的元素显示在数值较高的元素前面。本来页面加载顺序是【main】→【aside】→【sub】,我们把这3个的box-ordinal-group值分别设为1-0-2,这样就让aside在main左边显示了。

使用$.get,$post*(),要返回json,否则不会调用success方法。

发表评论

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