Ajax 执行流程 有用 一点

l 1.1使用JavaScript获得浏览器内置的AJAX引擎（XMLHttpRequest对象）

l 1.2 通过AJAX引擎确定请求路径和请求参数

l 1.3 通知AJAX引擎发送请求

l AJAX引擎会在不刷新浏览器地址栏的情况下，发送请求

l 2.1 服务器获得请求参数

l 2.2 服务器处理请求参数（添加、查询等操作）

l 2.3 服务器响应数据给浏览器

l AJAX引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据传递给浏览器页面。

l 3.1 通过设置给AJAX引擎的回调函数获得服务器响应的数据

l 3.2 使用JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新目的。

l $.post() 以post请求方式发送ajax

格式：jQuery.post(url, [data], [callback], [type])

参数1：url，请求路径

参数2：data，请求参数

参数3：callback，回调函数

参数4：type，返回内容格式，xml, html, script, json, text, _default。

服务器响应编码为：application/json;charset=UTF-8，回调函数data类型是json对象

服务器响应编码为：text/html;charset=UTF-8，回调函数data类型是字符串。

l 常用对象：

n JSONObject， java对象（JavaBean、Map）与JSON数据 转换工具类  对象和map集合

n JSONArray，java集合（List、Array） 与JSON数据 转换工具类

键盘按下和抬起 实现的ajax查询数据库显示下拉列表

条件查询的 拼音和文字都匹配的代码

* 条件查询商品

* @param condition

* @param params

* @return

*/

public List<Product> findAll(String word) throws SQLException{

StringBuilder builder = new StringBuilder();

List<Object> paramsList = new ArrayList<Object>();

if(word != null){

// 拼凑关键字的属性，hao拼凑成“%h%a%o%”

StringBuilder wordBuilder = new StringBuilder();

wordBuilder.append("%");

for(int i = 0 ; i < word.length() ; i ++ ){

wordBuilder.append(word.charAt(i)).append("%");   append 可以连着拼接

}

//1 汉字匹配

builder.append(" and pname like ?");

paramsList.add(wordBuilder.toString());

//2 拼音匹配

builder.append(" or pinyin like ?");

paramsList.add(wordBuilder.toString());

}

//转换成需要的条件

String condition = builder.toString();

Object[] params = paramsList.toArray();

QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource());

String sql = "select * from product where 1=1 " + condition;

return queryRunner.query(sql, new BeanListHandler<Product>(Product.class), params);

}

前台页面js代码

//自动填充

$(function(){

$("#search").keyup(function(){

var url = "/day15_autocomplete/productFindByWordServlet";

var word = $(this).val();  获取用户输入的数据作为参数

if(word == "") {

//如果没有输入关键字，隐藏提供区域

$("#completeShow").slideUp(200);

return false;

}

var params = {"word":word};

$.post(url,params,function(data){

$("#completeShow").html("<ul id='itemul' class='list-group'></ul>");

for(var i = 0 ; i < data.length ; i ++){

var product = data[i];

//处理关键字显示

var str = ""+product.pname + "("+ product.pinyin +")";

$("#itemul").append("<li class='list-group-item'><a href='#'>"+str+"</a></li>");

$("#completeShow").show();

}

});

}).focus(function(){

//获得焦点时，如果有搜索项显示

if($("#completeShow li").size() > 0){

$("#completeShow").show();

}

}).click(function(){

//如果点击的是文本框，阻止点击事件，及不触发document的click事件

return false;

});

/**

* 点击其他位置时，隐藏提示区域

*/

$(document).click(function(){

$("#completeShow").slideUp(200);

});

});