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/01周主题] – Web 项目开发中的常见问题

这周来一直在赶一个Web项目,没多少时间focus到其他上面,于是这周的主题就干脆做个整理,整理下web项目开发时遇到的一些问题和解决办法。

本周主题:Web 项目开发中的常见问题

一、中文乱码

建议统一使用UTF8,或者全局做个filter处理。

二、表单校验

使用第三方校验框架, 而非自己去写,可以减少很多工作量。

三、Ajax的使用

首页尽量少用ajax,页面初次加载时常会加载不上来,尤其多个Ajax实例同时运行。

四、UI 规范

UI最好是出Demo,跟客户确认,定终稿,然后开发按最终效果图实现页面最好,否则没有页面或者效果图,即使有统一的规范,还是会浪费很多时间去调UI问题。

五、浏览器的兼容问题

虽然IE6基本上淘汰了,可老机器上使用IE6的还是不少的,Css 在处理兼容问题时,建议分开处理,在页面进行浏览器version判断,读取不同的css,这样管理和调整起来都方便。

六、比较完整的测试数据

页面框架搭完了,看着效果不错,可是填完数据后会发现和想象的不太一样。

七、用JPA Or JDBC 与数据库交互

JPA与JDBC相比之下,使用JPA大大减少了编程人员的工作量,因此还是偏向使用JPA,特殊环境下再选择JDBC

[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的一个中文文章