项目日记_springMVC 学习杂记 4

最新推荐文章于 2023-07-12 17:04:29 发布

原创最新推荐文章于 2023-07-12 17:04:29 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

项目日记_spring杂记专栏收录该内容

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都不同