day44-Ajax-Json-课件-代码-总结

黑马day44-Ajax-Json-课件-代码-总结：http://pan.baidu.com/s/1jH8sQiU

内容：建立库脚本，pdf课件(有详细笔记，标记重点)，代码。===项目03是 个onkeyup或onkeydown “输入提示”   案例。

===知识点总结-实现步骤：

01.搭建环境：

新建项目，复制粘贴主页原型；

新建servlet：doWord。===根据报错，导入JDK,Tomcat等等；

运行数据库脚本：建库建表；

根据word表，建立实体类Word；

导入mysql,C3P0,BeanUtils,DBUtils,Json,等jar；

复制c3p0-config.xml到src目录，修改数据库名，用户名密码；

02.代码：

02.1 页面：

input 添加 onkepup或οnkeydοwn=“tips()”事件；

02.2 Js 代码：

<script type="text/javascript">
			function tips(){
				
				var inputWord = $("#inputWord").val();
				if (""==inputWord || inputWord==null) {
					return;
				}
				
				$.post(
						"${pageContext.request.contextPath}/doWord",
						//"inputWord="+inputWord,//===方式一
						{"inputWord":inputWord},//===发送Json（推荐）
						function (v){		//===接收Json
							//alert(v);//返回值。
							$("#completeShow").show();
							$("#completeShow").html("<ul id='itemul' class='list-group'></ul>");
							//直接遍历json数组。
							for (var i = 0; i < v.length; i++) {
								var word = v[i];
								$("#itemul").append("<li class='list-group-item'><a href='#'>"+word.word+"("+word.pinyin+")"+"</a></li>");
							}
						},
						"json"
						);
			}
		</script>

02.3 servlet:：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		/*===Ajax post请求自动处理请求数据乱码，所以这里不需要处理。
		 * ==如果是get请求,ajax不会处理乱码，需要手动处理：
		 * inputName = new String(inputName.getBytes("ISO-8859-1"),"UTF-8");
		 * */
		String inputWord = request.getParameter("inputWord");
		WordService wservice = new WordService();
		 List wordList = null;
		try {
			wordList = wservice.findWords(inputWord);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		System.out.println("==servlet:list"+wordList);
		/*======Java处理Json数据：把Java对象 变为Json格式。
		 * 可以手动拼接String。这里使用json-lib.jar提供的工具类。
		 * */
		JSONArray jo = JSONArray.fromObject(wordList);
		String string = jo.toString();
		System.out.println("==servlet:string"+string);
		response.setContentType("html/text;charset=utf-8");//页面显示乱码处理==统一方式
		response.getWriter().write(string);
	}

02.4 dao :注意这里使用的是 BeanListHandler()。

public List findWords(String inputWord) throws SQLException {
		QueryRunner qr = new QueryRunner(C3p0Utils.getDataSource());
		String sql = "select * from word where word like ? or pinyin like ?";
		String[] params = {"%"+inputWord+"%","%"+inputWord+"%"};
		List<Word> list = qr.query(sql, new BeanListHandler<>(Word.class),params);
		System.out.println("===list:"+list);
		return list;
	}

02.5弹窗div默认隐藏，高度随着内容多少变化。

<style type="text/css">
			#completeShow{
				display: none;
				height:auto;
			}
		</style>	

==========完毕。Json 是独立于其他语言的 一门语言。和xml一样。所以操作Json。每种语言有自己的ApI。

我已经学习了JS操作Json（取值）和Java操作Json（取值） 。