记录week3

What I Get

1、Delete具体实现

1）利用post传参数给后台：创建虚拟表单form，不显示，定义method为“post”；增加元素并且将文件名作为value的值；然后提交。
2）删除文件这个操作有风险，需要再次确认是否要删除改文件：利用boostrap模态框实现。
3）进度：完成

delete_a.onclick = function DeleteFileAlert() {
       var delete_show=document.getElementById("DeleteShow");
       delete_show.innerHTML="Delete file " + filename + " ?";
       var delete_b = document.getElementById("delete_b");
       delete_b.onclick = function DeleteFile() {
       //js创建虚拟表单来POST参数；
       var tempform = document.createElement("form");
           tempform.action="/delete";
           tempform.method="POST";
           tempform.style.display="none";
           //传递参数按钮
           var tempinput= document.createElement("input");
           tempinput.name="name";
           tempinput.value=filename;
           tempform.appendChild(tempinput);
           document.body.appendChild(tempform);
           /*提交按钮
           注意：即使js给form对象提供了submit()方法，那也不意味表单中可以不写提交按钮这个元素，即form表单依然需要五脏俱全才可以使用js的submit()方法进行提交。
           ***发现将提交按钮元素删除后，也可以成功submit***
           */
           var opt = document.createElement("input");
           opt.type = "submit";  
           //tempform.appendChild(opt);  
           tempform.submit();
           document.body.removeChild(tempform);    
       }
  }

更多：

• http://www.w3school.com.cn/jquery/ajax_post.asp
• http://blog.csdn.net/jj88888/article/details/49804015

2、Edit实现

edit有两个功能：查看和保存修改
1）查看
通过xmlhttp.responseText把文件内容读取出来，然后显示在div里。
把代码转为文本显示：

replace(/</g,"&lt;")//每当找到<，就将它替换成&lt;
replace(/>/g,"&gt;")//每当找到>，就将它替换成&gt;    

不足之处：在div里显示的文本会失去换行，被一个空格替换，多个空格也会被一个空格替换。
改进：将div标签改为pre标签（pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。pre标签的一个常见应用就是用来表示计算机的源代码。）
进度：已实现换行。:)
7.28发现的bug
无法加载最新版本的文件内容，显示的是之前浏览器缓存的内容，需要重复操作2次后，才能正常显示最新版本的内容。
原因：浏览器缓存机制
解决方法：在请求文件的URL上添加随机数，防止浏览器使用缓存文件就好
url=”./static/files/vasp” + “/” + filename+ “?d=” + Math.random();
浏览器缓存机制：
http://www.techweb.com.cn/network/system/2016-01-05/2252395.shtml

2）保存修改
点击按钮后，保存文件并且关闭对话框。

  * 关闭对话框
    $(function ()  {
      $('#EditModal').modal('hide')      
    });

对话框消失，但是后面的蒙版没有消失，而且透明度为0，因此，选择使用属性data-dismiss：

<button type="button" class="btn btn-primary" onclick="SaveFile()" id="save_b" data-dismiss="modal">Save changes</button>

感想：耗费了太长时间在$(‘#EditModal’).modal(‘hide’)，没有想到data-dismiss，不够灵活。:(
* 保存文件
写好了save方法，调用save方法，然后将文件传给saveFile 。创建虚拟表单，分别传文件名和文件内容post到后台，方法与实现delete功能类似。
尚未解决：换行和空格没有实现。