项目日记_springMVC 学习杂记 4

本台插播一条重要新闻，下面写的东西中，用紫色标注的都TM有问题(关于onpropertychange问题，select联动的change是可以触发到的)，我去年买了个大鼠标，网上的东西不能轻信，关键onsubmit那个是从w3c上看到的，是我理解错了，还是IE出补丁了，还是本就浏览器兼容问题，以后一定要对自己写的东西负责啊，大书包

1.JS文件飘红，clean一下就OK了，一般都是IDE的问题

2.路径问题

：在Servlet中，"/"代表Web应用的跟目录。和物理路径的相对表示。例如："./" 代表当前目录,"../"代表上级目录。

需要调用web-inf下的js  用绝对路径掉，或者要用 request 取项目路径 然后拼出js的路径来调

3.request获取路径:转自ItEye

request 获取各种路径

4.form表单提交 

4.1 dom中submit

html DOM中

Submit 对象代表 HTML 表单中的一个提交按钮 (submit button)。

在 HTML 表单中 <input type="submit"> 标签每出现一次，一个 Submit 对象就会被创建。

在表单提交之前，触发 onclick 事件句柄，并且一个句柄可以通过返回 fasle 来取消表单提交。

您可以通过遍历表单的 elements[] 数组来访问某个提交按钮，或者通过使用document.getElementById()，或者使用jquery。来得到这个submit对象

formObject.submit()

该方法提交表单的方式与用户单击 Submit 按钮一样，但是表单的 onsubmit 事件句柄不会被调用。

Form 对象的 onsubmit 属性指定了一个事件句柄函数。当用户单击了表单中的 Submit 按钮而提交一个表单时，就会调用这个事件句柄函数。注意，当调用方法Form.submit() 时，该处理器函数不会被调用。

如果 onsubmit 句柄返回 fasle，表单的元素就不会提交。如果该函数返回其他值或什么都没有返回，则表单会被提交。

提示：由于 onsubmit 句柄可以取消表单的提交，所以它对于进行表单验证是十分理想的。

提示：可以用iframe来实现无刷新提交表单

             

＜form action="*****.action" id="form1" name="form1" encType="multipart/form-data"  method="post" target="hidden_frame" ＞       ＜input type="file" id="file" name="file" style="width:450"＞       ＜INPUT type="submit" value="上传文件"＞＜span id="msg"＞＜/span＞       ＜br＞       ＜font color="red"＞支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传＜/font＞                     ＜iframe name='hidden_frame' id="hidden_frame" ＞＜/iframe＞   ＜/form＞   

    4.2 引用jquery.form.js，是要在1.7以上(on函数是在1.7以上才支持的)？忘了 

好处是可以有成功失败等回调函数，最关键的是可以指定刷新区域，比如下面的修改 头像完了，刷新头像的例子

'<form id="updateUser"  method="post" action="addOrUpdateUserInfo.view" enctype="multipart/form-data"> ','<input type="file" id="uploadImg" name="uploadImg" class="filetext"/>','<a id="submitImage" class="ckm-btn " disabled="disabled">提交</a>','<span></span>','</form>',var options = {   target:        '#mydiv',   // 需要刷新的区域  //beforeSubmit:  showRequest,  // 提交前调用的方法  //success:       showResponse  // 返回后笤俑的方法  // other available options:   //url:       url         // 提交的URL, 默认使用FORM  ACTION   //type:      type        // 'get' or 'post', override for form's 'method' attribute   //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)   //clearForm: true        // 是否清空form  //resetForm: true        // 是否重置form  // $.ajax options can be used here too, for example:   //timeout:   3000   };   $("#submitImage").on("click",function(){$("#addOrupdateUser").ajaxSubmit(personalOptions);}) $("#uploadImg").on("propertychange",function(){$("#submitImage").next().text("");$("#submitImage").removeAttr("disabled");});function showPersonal(){$("#personalImg").attr("src","queryImageById.view?refresh="+Math.random());$("#submitImage").attr("disabled","disabled").next().text("提交成功");}'<img id="personalImg" class="personalImg"  src="queryImageById.view?refresh="'+Math.random()+'/>'

1.propertychange 是IE8独有属性，
这个问题来自IE(LTE8)中对checkbox和radio change事件的实现问题，在IE(LTE8)中测试下来，当你点击一个checkbox或者radio，它的change事件是不会立即触发，除非你让它失去焦点，而在其他标准浏览器中(包括IE9)，是点击后立即触发change事件的，这的确是个蛋疼的问题，说到解决方法，倒也比较容易，用IE(LTE8)中元素特有的propertychange事件来处理(IE9已经没这玩意儿了)，就能避免上述问题，如：
checkEl.attachEvent('onpropertychange', function() {
console.log('hey man, I am changed');
});
 但是这样就认为解决了，是不充分的，因为像checkEl.setAttribute('data-value', 'god')这样的操作也会触发其propertychange事件，所以我们需要用其event.propertyName来判断下，如：
checkEl.attachEvent('onpropertychange', function() {
if(window.event.propertyName == 'checked')
console.log('blah blah blah...');
});
2.加上Math.random()的目的是让每次请求不同
浏览器会把请求缓存，如果你的请求相同，他会优先读缓存，所以加上一个随机数，尽量保证每次请求的URL都不同