本文主要是针对一个Hibernate+Servlet项目中用Jquery或Ajax遇到的一些问题进行总结。
1. 首先是针对寻找命名的DOM元件,我这里犯了一个错误就是没有严格按照其格式进行查找。
如:<button name=btnQuery>Search</button>
这样的一个按钮,Query采用的应是$("button[name=btnQuery]").on("click",fn);
这样的。
注意点:
a)JQuery中button必须是和标签一致的button,不能是input。
b)Query中,
$().click(fn)
这种写法已经在JQuery3中被淘汰了,需要采用新的写法$().on("click",fn)
。c)因HTML5中对单引号双引号要求不严格,可以选择1单引号、2双引号、3不加 这三种策略都是允许的,但是注意区分嵌套的用法。
2. 其次是JSON的格式问题。
因为在AJAX中一直ajax call都是failed的,总出error,而去不了success那儿。
通过排查问题之后,得到了以下经验:
a) JSON的左边是一个"key",所谓的can be any valid string,可以是String但不能是数字。因此我的DepartmentServlet在writer中写出去的JSON是不符合格式的。这个输出长这样:
{1:"Patsy Kiehn",2:"Edgardo Weber",3:"Jeanne Sanford",6:"Alvis Pfeffer",7:"Laverna Schaden",8:"Kayden Carroll",9:"Llewellyn Stracke I",10:"Frida Jacobi"}
但是JSON不支持整型的key,可以看到甚至连这个编辑器都不上色了。。。
而实际上正确的应该长这样(左边的,把整型变成了字符串):
{"1":"Patsy Kiehn","2":"Edgardo Weber","3":"Jeanne Sanford","6":"Alvis Pfeffer","7":"Laverna Schaden","8":"Kayden Carroll","9":"Llewellyn Stracke I","10":"Frida Jacobi"}
另外通常AJAX或者说JQuery的bug不好排查,我是在这个网站对JSON输出进行格式审核,从而解决问题的。
b) 另外一个解决办法就是,将ajax的dataType参数一项给去掉了。因为该参数限定了接收的ajax call返回的数据类型,而非发出的数据类型。因此,即使我们输出的”json“文件格式有错,我们依然能够成功地接收来自DepartmentServlet的data,只不过是以String的形式罢了。
实际中采用了a)中的办法,将Servlet输出数据类型修改为正确的JSON格式(key是String)。addDepartment.jsp文件中的ajax代码如下。
$.post("DepartmentServlet", { action : "query", key : key }, //第一个参数是url, 第二个参数是data
function(data, textStatus) { //第三个参数success(data, textStatus, jqXHR),请求成功时的回调函数
if (textStatus != 'success') {
alert('Error occurred:' + textStatus + ', data:' + data);
return;
}
lineManagerList.options.length = 0;
for ( var i in data) {
lineManagerList.options.add(new Option(data[i], i)); // 填满
}
}, "json"); //第四个函数,定义了接受Servlet传来的数据类型为json数据类型
$.post()方法是一个简化版的$.ajax()方法,如果用纯正$.ajax()写法如下。
$.ajax({
type : 'post',
url : 'DepartmentServlet',
data : {
action : "query",
key : key
},
async : false,
dataType : "json",
success : function(data) {
lineManagerList.options.length = 0;
for ( var i in data) {
lineManagerList.options.add(new Option(data[i], i));
}
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("error");
}
});
效果一样,只不过参数更多,丰俭由人。