关于Jquery使用的一些注意事项

本文主要是针对一个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");
	}
});

效果一样，只不过参数更多，丰俭由人。

转载于:https://my.oschina.net/swanf/blog/3090137