ajax，分页，include

引入bootstrap：

2. <**link rel=“stylesheet” href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">**
3. ​
5. <**link rel=“stylesheet” href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">**
6. ​
8. <**script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script>
9. ​
11. <**script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js">script>

指令：
page，include，taglib

• page指令(isErrorPage=“404.jsp”)

  • errorPage
  • *web.xml error-page配置

• include：

  • 静态包含：文件包含,文件在编译阶段合并（快，静态的变成一个java）

    <%@ include  file="buttom.jsp"   %>  

最好与《base》连用 <base href="<%=application.getContextPath() %>/" />和过滤器设置字符编码

• 动态包含：运行时将请求发送给被包含的jsp，合并响应（好处可以传参数）(两个java文件)

​ <jsp:include pag=""></jsp:include>

<jsp:include page="top.jsp">
<jsp:param value="这是标题" name="title"/>
</jsp:include>
  
  //另一个页面top.jsp
  /*
  *通过《jsp:include page=页面.jsp的方式，-》
        
《jsp：param name=title，value=标题的内容 传过去》
另一个如：top。jsp 中某个地方 ￥{param.name }，就可以把值传过来，这个动态导入方式
  */
  <title>${param.title }</title>

分页：

• limit start,size 起始位置，每页条数
• 计算起始位置： (pageIdx-1) * pageSize
• 计算总条数：select count(*) from emall_user where xxxx
• 计算总页数： totalCount%pageSize==0? totalCount/pageSize : (totalCount/pageSize+1)
• 计算上一页、下一页、首页、尾页

AJAX

network请求（chrom）

异步跳转，不刷新页面

• async javascript and xml 异步的JavaScript和XML

• 通信格式：JSON ： JavaScript Object Notation Javascript对象标记法

  • var p = {name:“三”,age:12, blowCow:function(){}}

  • “{“name”:“三”,age:12, blowCow:function(){}}”

  • var=p{name:“1”,age:“1”，date:{username：“user”，password：“123”}}

    ​

• 浏览器端【纯JS】

  • 发起请求
  • 处理响应（DOM操作）

• 服务端

  • 接收请求
  • 处理
  • 响应 json

---

//一：这是一个ajax 结构

AJAX步骤：
  导入jquery：
  <script type="text/javascript" src="js/jquery-3.1.0.js"></script>
  
  //keyup 事件触发
  //取出input值
  //发送请求到服务器
  //解析响应，DOM


  function sugg() {
			var inputValue = $("[name=kw]").val();
			if (!inputValue) {
				return;
			}
			//发起ajax请求
			$.ajax('srchSugg', {//相当于action
				type : "get",//相当于method
				dataType : "json",
				data : {//相当于     ？kw=值
					"kw" : inputValue
				},
				success : function(result) {
					console.log(result)			},
				error : function(xhr, msg, e) {
					alert("请求失败:" + msg)    	}
			});
  
  

//二：这是一个完整的AJAX

	$.ajax('srchSugg', {
				type : "get",
				dataType : "json",
				data : {
					"kw" : inputValue
				},
				success : function(result) {
					console.log(result)
					//判断是否正确
					if (result.success) {
						var dataArr = result.data;
						var select = $("select");
						//清空子元素，否则追加元素
						select.empty();
						//循环生成option,加入select中
						for (var i = 0; i < dataArr.length; i++) {
							$("<option>").text(dataArr[i]).appendTo(select);
						}
					} else {
						alert("加载建议失败");
					}
				},
				error : function(xhr, msg, e) {
					alert("请求失败:" + msg)
				}
			});
  
  

//三：回车，失去焦点

  $(function() {
			$(document).keydown(function(e) {
              //	$("[name=kw]").keydown(function(e) {
              console.log(e.keyCode+"查看按键代码，如13是回车")
				if (e.keyCode == 13 && $("[name=kw]").val()) {
					sugg();
				}
			});

			$("[name=kw]").blur(function() {
				sugg();
			});
		});
  

//四：这是一个完整的JavaScript

  
  
  <input type="text" name="kw" />
	<select></select>
    
    
    
  <script type="text/javascript">
		//keyup事件触发
		//取出input值
		//发请求到服务器
		//解析响应，DOM
		//将DOM插入到select中
		$(function() {
			$(document).keydown(function(e) {
				if (e.keyCode == 13 && $("[name=kw]").val()) {
					sugg();
				}
			});

			$("[name=kw]").blur(function() {
				sugg();
			});
		});

		function sugg() {

			var inputValue = $("[name=kw]").val();
			if (!inputValue) {
				return;
			}
			//发起ajax请求
			$.ajax('srchSugg', {
				type : "get",
				dataType : "json",
				data : {
					"kw" : inputValue
				},
				success : function(result) {
					console.log(result)
					//判断是否正确
					if (result.success) {
						var dataArr = result.data;
						var select = $("select");
						//清空子元素，否则追加元素
						select.empty();
						//循环生成option,加入select中
						for (var i = 0; i < dataArr.length; i++) {
							$("<option>").text(dataArr[i]).appendTo(select);
						}
					} else {
						alert("加载建议失败");
					}
				},
				error : function(xhr, msg, e) {
					alert("请求失败:" + msg)
				}
			});
		}
	</script>

//五：java代码

      @WebServlet("/srchSugg")
public class SearchSuggestionServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private static final Extractor<String> STRING_EXTRACTOR = (rs)->{
		return rs.getString(1);
	};//获取名字
	
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String kw = request.getParameter("kw");//通过kw来取得文本框的值，js来提交数据
		
		if(kw!=null&&kw.length()>0) {
			DBHelper dbh = new DBHelper();
			List<String> names = dbh.query("select product_name from product where product_name like concat('%',?,'%')",STRING_EXTRACTOR,kw);
			System.out.println(names);
			
			//手动转json			
          String json = translateToJson(names);
			
			//自动，下载一个GOSN工具类，来转json
			Map<String,Object> map = new HashMap<>();
			map.put("success",true);
			map.put("data", names);
          //创建gson对象（建造者模式）,为以后的时间转化打好基础
			Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create();
          //转json
			String json = gson.toJson(map);
			//查看json
			response.getWriter().append(json);

		}else {
			//response.getWriter().append("{\"success\":false,\"msg\":\"没有参数\"}");
          Map<String,Object> map = new HashMap<>();
			map.put("success",false);
			map.put("msg", "没有参数");
          	Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create();
            String json = gson.toJson(map);
            response.getWriter().append(json);
		}
	}
//手动转json
	private String translateToJson(List<String> names) {
		//json转换 ： {\"success\":true,\"data\":[\"榴莲糖\", \"牛奶糖\", \"牛轧糖\"]}
		StringBuilder jsonBuilder = new StringBuilder();
		
		jsonBuilder.append("{\"success\":")
		.append(true)
		.append(",\"data\":[");
		for(String n:names) {
			jsonBuilder.append("\"").append(n).append("\",");
		}
		jsonBuilder.deleteCharAt(jsonBuilder.length()-1);
		jsonBuilder.append("]}");
		return jsonBuilder.toString();
	}

}

---

工具类：

• ApacheCommons
  • http://commons.apache.org/
  • [https://www.cnblogs.com/koal/p/5161743.html]
• GSON json转换工具

jquery的网站

jqueery123

jquery.cuishifeng.cn

​