一个简单留言板ajax应用的启示备忘录

本着学习 jquery 中 ajax 的态度，后台逻辑十分简单，一个 servlet 搞定，没啥注释，合计7KB。额，刚发现 js 文件只写了 5KB，尴尬，可见 jquery 真的很很很省程序员敲代码。

沿路解决的问题，一一列举，嘿嘿。

一、乱码问题

URL 传参乱码，记得以前某某网站（或许是书）说过什么在前台两次对URL进行两次encoding，在后台在进行一次 decoding，没有尝试，不是知道前台怎么encoding。于是google之，结论：修改一句 jquery 的源码即可。打开 jquery.js 搜索 contentType: "application/x-www-form-urlencoded;” 改成 contentType: "application/x-www-form-urlencoded;charset=UTF-8", 即可。显然 jquery 的作者没有考虑到国际化，或者是王星般的粗心。

还遇到另外一种乱码问题，貌似有点非主流，google 了半天都找不到相应结果，不知咋的被我瞬间解决。具体嘛，如果碰到在 js 文件中写如下类似代码：

$("#mesContent").append("<div class='message'>" + id + title
            + " 由" + "<a href='#' onclick=showReply()>" + name
            + "</a>发表  |  <a href='#' onclick='showReply("
            + item.id + ")'>回复ta</a><br><span>" + content
            + "</span></div>");

结果是：变量引用是中文的，如 id 、title、content 等，前台显示正常，可是正常的中文输入，如里面的 "回复" 、"由" 之类的汉字被乱码，那么的话，请尝试着更改此 js 文件编码格式为 UTF-8 。

 

二、关于 JSON

使用getJSON() 或者是要得到json数据，服务器就必须得返回正确的json数据，要不然getJSON 就会一直没有结果，因为getJSON不会处理错误逻辑，这些错误就会莫名其妙的的，特别是对于初学者，我花了3个多小时才搞对，郁闷啊，要知道js是不区分双引号和单引号的，但是JSON必须得用双引号，其实我早该想到的，json是不同语言间数据交换格式，又不是js的，ajax请求也会一直错误。 正确的 json 数据应该如下：

{ "people":[{ "firstName":"Brett", "lastName":"McLaughlin", "email":"aaaa"},{ "firstName":"Jason", "lastName":"Hunter", "email":"bbbb"},{ "firstName":"Elliotte", "lastName":"Harold", "email":"cccc" }]} 

注意，这真的只能是一行，看的不方便的话，看下面：

{ "people":[{ "firstName":"Brett", "lastName":"McLaughlin", "email":"aaaa"},{ "firstName":"Jason", "lastName":"Hunter", "email":"bbbb"},{ "firstName":"Elliotte", "lastName":"Harold", "email":"cccc" }]}

如果不是通过 getJSON() 方法获取或者 get() 方法并设置最后一个参数为 "json" 获取数据的话 (即没有指明请求返回类型为 JSON)，而是用其他一些方法得到的服务器数据是字符串，交给前台由js处理，则必须得对象化，转化成jquery可以处理的对象。通过 eval() 方法对象化。话说，直接请求 JSON 格式数据不就得了。

可以预见，在后台拼写这些 JSON 数据是一件让程序员非常不淡定的事情，好在 java 可以使用 json-lib.jar 生成的json代码，可以是JSONArray 等等，返回给前台的是封装好了的对象，无需对象化了。

给个例子：

List<Message> msgs = new ArrayList<Message>();
try {
  while (rs.next()) {
    Message msg = new Message();
    msg.setId(rs.getInt(ID));
    msg.setAddTime(rs.getString(ADDTIME));
    msg.setContent(rs.getString(CONTENT));
    msg.setEmail(rs.getString(EMAIL));
    msg.setIp(rs.getString(IP));
    msg.setName(rs.getString(NAME));
    msg.setPage(rs.getString(PAGE));
    msg.setQq(rs.getString(QQ));
    msg.setReplyContent(rs.getString(REPLYCONTENT));
    msg.setReplyTime(rs.getString(REPLYTIME));
    msg.setTitle(rs.getString(TITLE));
    msgs.add(msg);
  }
  JSONArray json = JSONArray.fromObject(msgs);//酱紫就行了，灰常简单
  out.print(json);
} catch (SQLException e) {
  e.printStackTrace();
}

json-lib 的使用还需要第三方包的支持，下面英文摘自 http://json-lib.sourceforge.net/ ,json-lib 的下载也在此页面，注意看左边，download 在左边。大陆的网页都是大大的 download 随处可见，都是骗人的，国外的这个网站 download 藏得好深，险些没发现。

Json-lib comes in two flavors, depending on the jdk compatibility. json-lib-x.x-jdk13 is compatible with JDK 1.3.1 and upwards. json-lib-x.x-jdk15 is compatible with JDK 1.5, includes support for Enums in JSONArray and JSONObject. Please reffer to the appropriate javadoc links available in the project menu.

Json-lib requires (at least) the following dependencies in your classpath:

jakarta commons-lang 2.5
jakarta commons-beanutils 1.8.0
jakarta commons-collections 3.2.1
jakarta commons-logging 1.1.1
ezmorph 1.0.6
Other dependencies are needed if working with XML andGroovy. Please review the Dependencies report to know more about those extra dependencies.

嘿嘿，发现 download 了没？？？

三、遍历对象

遍历对象，jquery 中的方法是 $.each(data,function(index,item){}); 很形象的方法名，强调的是，参考资料第一手的还是官方文档，不要怕是英文的而不敢去看，这个 each方法，有些网站给这样写 $.each(a,b);你就郁闷吧，这 a,b 神马玩意 (a 是要遍历的数据，b 方法)，当然，我这写的可能也会官方文档不一样，懒得去查的，不过应该还是容易理解的吧。

参考代码：

  $.each(data, function(i, item) {
        var title = item.title;
        var name = item.name;
        var content = item.content;
        var id = item.id;
        $("#mesContent").append("<div class='message'>" + id + title
            + " 由" + "<a href='#' onclick=showReply()>" + name
            + "</a>发表  |  <a href='#' onclick='showReply("
            + item.id + ")'>回复ta</a><br><span>" + content
            + "</span></div>");
        if (item.replyTime != "" && item.replyTime != null) {
          $("#mesContent").append("<div>MZULE对ta说："
              + item.replyContent + " | 回复时间：" + item.replyTime
              + "</div>");
        }
      });
  $("#loading").hide(500);
}

四、分页

分页在 mysql 中的语句是 select * from 表名limit 当前页数*每页条目数,每页条目数，如select * from mytable limit 0,10;意思是得到第0条数据后面的十条数据。也就是第一页的数据。select count(*) from mytable 可以得到表中记录个数，方便得到总页数，如返回的记录数为a，每页记录数为b，那么的话，总页数s = Math.ceil(a/b);值得注意的是，第一页为0,要得到最后一页的数据，就是 select * from mytable limit s*10,10;假定每页十条数据。

依旧给个示例：

...
else if (flag.equals("loadData")) {
  // 模拟加载效果，延时，自虐，(⊙o⊙)…//////////////////////////////
  try {                                     //////////////////////
    Thread.sleep(1000);                  //////////////////////
  } catch (InterruptedException e) {      //////////////////////
    e.printStackTrace();               //////////////////////
  }                                     //////////////////////
  ///////////////////////////////////////////////////////////
  String i = req.getParameter("pageIndex");
  System.out.println(i);
  int index = Integer.parseInt(i);
  ResultSet rs = DB
      .query("select * from messageboard order by addTime desc limit "+ index * 10 + ",10");
  List<Message> msgs = new ArrayList<Message>();
  try {
    while (rs.next()) {
      Message msg = new Message();
      msg.setId(rs.getInt(ID));
      msg.setAddTime(rs.getString(ADDTIME));
      msg.setContent(rs.getString(CONTENT));
      msg.setEmail(rs.getString(EMAIL));
      msg.setIp(rs.getString(IP));
      msg.setName(rs.getString(NAME));
      msg.setPage(rs.getString(PAGE));
      msg.setQq(rs.getString(QQ));
      msg.setReplyContent(rs.getString(REPLYCONTENT));
      msg.setReplyTime(rs.getString(REPLYTIME));
      msg.setTitle(rs.getString(TITLE));
      msgs.add(msg);
    }
    JSONArray json = JSONArray.fromObject(msgs);
    out.print(json);
  } catch (SQLException e) {
    e.printStackTrace();
  }

效果图贴一张就好，CSS 实在不想 (其实也搞不好) 弄，苦寻 CSS 高手指点。