黑马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(取值) 。