Notes:ajaxForm上传文件,返回json,回调不到success的处理建议

把之前项目中头像上传的一个功能,改为ajaxForm回调success处理。

之前是先上传头像到服务器,然后再在另一个页面显示并通过jcrop剪辑,最终生成用户头像。

这个过程多了一步页面刷新,如果使用ajaxForm做异步文件提交,那么返回json数据直接处理,方便不少。

但是有一个问题那就是之前好多人遇到的问题,ajaxForm上传文件时,页面中的js无法回调success方法,导致出现下载框,昨天对这个问题深入做了测试,一般解决方式:

  1. 选对jquery版本和jform版本,并不是最新的版本都可以,推荐经测试肯定可以用的版本:jquery-1.5.1.min.js 和 jquery.form-2.67.js
  2. 如果出现下载框,可以尝试将服务器返回json的ContentType 改为text/html
  3. 使用struts-json插件的,可以如下设置:

    <result name="success" type="json">
        <param name="contentType">
               text/html
        </param>
    </result>
    

    直接在页面输出的,可以如下设置:

    HttpServletResponse response = ServletActionContext.getResponse();
    response.setContentType("text/html;charset=UTF-8");
    

[10/22 周主题] – 强悍的JQuery Validate 插件

对于JQuery Validate,只有相见恨晚的感触,恐怕在表单验证领域这是目前我见过最好的插件了,可以很方便的使用,极大的提高表单验证的效率。

下面就介绍下简单的使用方法:

1、下载地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/,本文章发布时最新版是1.7。

2、在页面里面加载JQuery和JQuery Validate

<script type="text/javascript" src="theme/default/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="theme/default/js/jquery.validate.min.js"></script>

3、写一个表单提交页面,form id 为 login,两个提交域email和password。域提供相应的id。为了完善demo,我在里面也提供了一个注册的form,同时提供了自定义验证方法和ajax提交。

继续阅读[10/22 周主题] – 强悍的JQuery Validate 插件

为不同大小的浏览器视窗使用不同的样式表

同一个网站,访问它的浏览器可能会是不同的宽度,常见的有320px,480px,800px,1024px,1280px,1920px等,为不同大小的浏览器视窗提供不同的访问效果,提高用户的使用体验,同时网站本身也可以为不同受众提供不同的资源。

下面提供两种解决方案:

一、通过 W3C standard 来定义,例如:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

上面的代码表示:当访问网站的设备浏览器宽度大于等于800px时,将使用800.css这个样式。

又如:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

上面的代码表示:当访问网站的设备浏览器宽度在701px和900px之间时,将使用medium.css这个样式。

目前Mozilla, Opera和WebKit等浏览器的当前版本都支持这个标准,不幸的是IE浏览器并不支持此标准,包括IE8,以及IE9 Previous。

不要着急,方案二将解决此问题。

继续阅读为不同大小的浏览器视窗使用不同的样式表

老虎机式标签栏(Slot Machine Tabs)

玩过老虎机或者看过老虎机的朋友,对这个标签的运行轨迹将会相当熟悉了。

还是先看demo吧,

大体看了下JS文件, 主要使用了JQuery的animate方法,让标签1,标签2,标签3被点击时,获取不同的随机速率。

原文地址:http://css-tricks.com/slot-machine-tabs/

没有深入研究,仅仅记录下来,以备后用。

[10/08周主题] – JQuery分页导航条插件

之前在写 [10/02周主题] – 仿Gmail头像上传剪辑 时说,还有个JQuery的分页组件分享给大家,这个组件是别人设计的,我只是在其基础上,进行一些改动,以符合自身项目的需求。

之前在做Web项目时,分页功能的处理是放在服务器端,客户端只是用来显示分页导航条内容。 虽然将服务器端的分页功能进行封装,页码显示代码也进行了整理,但是总归不是很方便,做分页功能还是要做不少工作。

后来去看一些将分页功能放在客户端处理的例子,最后发现了这个比较不错的JQuery组件(如果你有好的方案也欢迎分享啊),原文章在这里:http://lym6520.javaeye.com/blog/540580,我就不做过多介绍了。

通过这个组件做分页功能,服务器端几乎不做什么处理,只需要显示数据列表时把总数传给该组件即可。至于分页组件的样式你完全可以自己去定制。

下面分享下自己的一些优化工作:

1、Loading和错误提示

Loading和错误信息的显示在获取数据时控制,这里用到了Ajax的几个状态来判断,比如beforeSend,success以及error。

2、分页组件的翻页和获取数据是异步的,这样如果出现服务器问题,无法获取翻页后的信息,但是分页导航条已经做了翻页了。由于服务器出错是在Ajax里面捕获的,这样就只能做个hack,通过dom操作来让翻页返回去,最终的效果会是这样的:假如现在在第三页,要跳转到第四页,点 “4” 翻页了,然后发现翻页后无法获取数据,出现服务器问题了,接着就又返回第三页了,显示错误信息。

[10/02周主题] – 仿Gmail头像上传剪辑

本周关注比较多的是JQuery部分,优化了一个分页组件,实现了一个仿Gmail头像上传并剪辑的功能。

分页组件稍后有时间可以分享一下,今天分享下仿Gmail头像上传剪辑的功能。

本周主题:仿Gmail头像上传剪辑

这个功能是参考了Gmail的头像上传功能,并参照其流程实现的,因此叫仿Gmail头像上传剪辑,建议想用类似功能的朋友先看看Gmail的头像上传流程。

使用到的工具:

1、JQuery

2、Jquery.Form.JS (JQuery的一个form插件),这里主要是在层里面用到它的ajaxSubmit功能。

3、JCrop(JQuery头像剪辑插件),之前有篇博文讲到。

场景,思路和做法:

1、比如更新用户信息时,要更新用户的头像,这里只是更新头像地址,而不是在更新用户信息页面时上传头像,头像上传和剪辑的处理交给其他组件完成,比如这个上传剪辑功能。

2、给一个链接,比如叫“上传照片”, 如下图:

点击该链接会弹出一个层, 如下图:

3、头像上传的事情在这个层内完成,先上传到系统的temp目录,因为这个图片最后是要删除的,JCrop 剪辑后的图片才是真正想要的。

4、将图片上传完后,进行同比例的显示缩放(注意我这里叫显示缩放,而不是真正的缩放,即仅在该层内等比例显示下即可,当然你也可以不显示缩放,结果是图片巨大个,显示不下或者出现滚动条),显示在该页面,然后加载JCrop插件,进行图片剪辑处理(这里为了简单,没有放像Gmail那样的预览小图,需要的朋友可以参照JCrop加上),如下图:

5、点击“应用更改”时,将在服务器上进行原图片的剪辑工作,JCrop需要的是剪辑框的x,y,w,h四个参数,但是剪辑是在原图片上进行的,因此此处的x,y,w,h需要做映射,将缩略后的x,y,w,h映射到原图片的x,y,w,h上,新图片剪辑后保存到你的头像目录,最后别忘记删除temp文件夹下的图片。如下图效果:

总结:

此功能的实现上没有什么新颖的东西,主要是将几个插件的使用揉合在一块,然后形成一个用起来比较顺手的功能,实现过程可能稍感麻烦,但是最终的效果还是不错!

jQuery图像剪裁插件 – Jcrop

由于项目需要,需要进行图像剪裁,网上找到这个JQuery的插件,蛮好用的,记录一下。

强烈建议使用前,先去官网看看Demo:http://deepliquid.com/projects/Jcrop/demos.php

实现的流程大体如下:

  1. 通过JCrop获取剪辑框的位置x, y 和 剪辑框的大小 w , h。
  2. 将图片和剪辑框的四个参数传到服务器端,由服务器完成图片的剪辑工作。
  3. 保存剪辑好的图片。

具体使用方法,看官网的手册,简单易懂:http://deepliquid.com/content/Jcrop_Manual.html

[09/50周主题] – JQuery入门

三赶鸭子上架的组织了一次JQuery入门培训,由于时间上的原因,自己没做Demo,拿官方现成的,主要是认识JQuery,了解JQuery核心函数,介绍一些常用的选择器,还有事件处理,以及Ajax的使用,这里简单分享下:

本周主题:JQuery

一、JQuery核心认识

$ 表示JQuery类,$(…) 构造一个JQuery类,这里的JQuery类是一个集合数组对象,而非Dom对象。

jQuery(expression,[context])

$("div > p");
$("input:radio", document.forms[0]);
$("div", xml.responseXML);

jQuery( html )

$("<div>Hello</div>").appendTo("body");

主要用来加载html

jQuery( elements )

$(document.body).css("background-color", "black");
$(myForm.elements).hide();

jQuery( callback )

$(function(){
  alert('hello');
});

JQuey中执行方法是在页面加载结束后,官方解释是:A shorthand for $(document).ready().

二、JQuery选择器

JQuery选择器是JQuery的一大亮点,快捷,高效的遍历整个HTML文档,常用的如下面几种:

$("#id");
$("div");
$(".className");
$("div,span,p.myClass")
$("form input")
$("form > input")

强烈建议直接看官方文档:http://docs.jquery.com/Selectors

三、JQuery事件

$("p").bind("click", function(e){});
$("p").click(function() {})
trigger( event, data ) //触发事件
triggerHandler( event, data ) //触发事件,但不触发浏览器的默认事件
$("p").live("click", function(){ //在p以及p的下面的子elements上都加上click事件
      $(this).after("<p>Another paragraph!</p>");
});

更多,参见官方文档:http://docs.jquery.com/Events

四、JQuery Ajax

ajax这块感觉和其他框架没多少差别,用起来基本类似:
1、$.post(…) 和 $.get(…)

$.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});

2、$.ajax(…)

$.ajax({
    url: 'getdata.action',
    type: 'GET',
    dataType: 'html',
    Timeout: 1000,
    beforeSend: function(){
     // Handle the beforeSend event
   },
    success: function(html){
     // do something with html
   },
    complete: function(){
     // Handle the complete event
   },
    error: function(){
     alert('Error loading HTML document');
    },
});

五、推荐阅读

1、http://jquery.com/
2、jQuery 1.3 API 中文参考文档
3、http://jqueryui.com/
4、http://jquery.org.cn/
5、有关Ajax的一个中文文章