发表于： 2017-05-18 23:25:43
1 913
今天完成的事情：
今天吃饭时听相博和高高师兄说道任务8的搜索框，一开始以为是要用filter对表格内容进行过滤然后展示，
但这种方法一次只能过滤当前分页的内容，如果要过滤全部内容就要先把所有内容都取来，再对数据进行处理，最后展示，而这种做法显然比不上在取数据的加上参数进行有针对性的方法合适。
学习FormData对象的定义和用法。
下午听老大讲了js中MVC的运用，我们平时写的代码太过死板，配置信息和代码写在一起，代码没有复用性、扩展性，即使能很好的完成要求的任务，但需求一旦发生变化（事实上经常变化），很多代码就需要重写。这也是做任务和做实际项目的一个很大的区别。晚上大家一起去穆全羊吃了顿火锅，回来听了雪峰的小课堂网站性能优化。
明天计划的事情：
继续进行任务9的学习，fileReader、angular组件等。
遇到的问题：
感觉自己和其他人比做任务的时候经常找不到重点，甚至看任务需求的时候有时都会理解错意思，导致各种走偏，这是一个很严重的问题，会导致学习失去方向感。
收获：
XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。
使用FormData对象
1.创建一个FormData空对象，然后使用append方法添加key/value
var formdata = new FormData();
formdata.append('name','fdipzone');
formdata.append('gender','male');
2.取得form对象，作为参数传入到FormData对象
<form name="form1" id="form1">
<input type="text" name="name" value="fdipzone">
<input type="text" name="gender" value="male">
</form>
var form = document.getElementById('form1');
var formdata = new FormData(form);
使用FormData提交表单及上传文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> FormData Demo </title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
<!--
function fsubmit(){
var data = new FormData($('#form1')[0]);
$.ajax({
url: 'server.php',
type: 'POST',
data: data,
dataType: 'JSON',
cache: false,
processData: false,
contentType: false
}).done(function(ret){
if(ret['isSuccess']){
var result = '';
result += 'name=' + ret['name'] + '<br>';
result += 'gender=' + ret['gender'] + '<br>';
result += '<img src="' + ret['photo'] + '" width="100">';
$('#result').html(result);
}else{
alert('提交失敗');
}
});
return false;
}
-->
</script>
</head>
<body>
<form name="form1" id="form1">
<p>name:<input type="text" name="name" ></p>
<p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>
<p>photo:<input type="file" name="photo" id="photo"></p>
<p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p>
</form>
<div id="result"></div>
</body>
</html>
在做任务2-4的时候，可以把一些需要弹出或显示在placeholder中的信息集中放在一个config.js文件中，以json格式保存起来，代码中用到的时候直接调用，这样改的时候直接到json里去改，比较方便。写js代码时心中也要有module controller的概念，提高代码的可复用性。
返回列表
评论