1.同界面登录的实现

所设计的架包下载

文件 json的使用与架包下载密码:40tf

JSTL架包下载

文件密码:6dva

2.Ajax实现搜索提示框

1.AJAX是什么？
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。

2.异步交互和同步交互
同步：
（1）发一个请求，就要等待服务器的响应结束，然后才能发第二个请求！中间这段时间就是一个字“卡”
（2）刷新的是这个页面

异步：
（1）发一个请求后，无需等待服务器的响应，然后就可以发第二个请求！
（2）可以使用js接口服务器的响应，然后使用js来局部刷新

【示例】使用JS点击按钮触发事件，设置内容改变标签内容（局部刷新）

1.布局搜索界面

实现效果演示

css样式
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<link rel="stylesheet" type="text/css" href="css/admin.css" />
		<style type="text/css">
		a{
		text-decoration:none;
		}
		#tsDiv{
		background-color: #cecece;
		width:168px ; 
		position:absolute; 
		z-index: 33 ; 
		margin-left:40px ;
		height:140px;
		/* 超过高度自动滚动条  */
		overflow: auto;
		}
		#tsDiv>div{
		height: 23px;
		line-height: 23px;
		cursor:pointer;
		}
		#tsDiv>div:hover {
	  color: white;
	  background: pink;
}
		</style>




		html代码	


				<div style="height: 35px;width: 947px; text-align:left; line-height: 35px ;margin-left: 30px">
				
				
				<label>搜索：</label>
				<input id="inSearch" type="text" name="strName" />
				<input onclick="onCli()" id="valute" type="submit" value="搜索" class="opt_sub"  />
				
				
				<!-- 搜索提示框  -->
				<div id="tsDiv">
				
				
				</div>
				
				
				</div>

2.js脚本编写

	<!-- 搜索提示 -->
		<script type="text/javascript">
		/* 保存模糊查询的数据 */
		var strName="";
		$(function () {
			$("#tsDiv").hide();
                         keyup键盘按下事件
			$("#inSearch").keyup(function () {
				if(!$(this).val()){
					$("#tsDiv").hide();
					fenye(1, "");
					strName="";
				}else{
					$("#tsDiv").show();
				}
				var value=$(this).val();
			  /*  $.post("AutoFull.do","valu="+value, function (msg) {
				   alert(msg)
			}); */
			
			  ajax实现跳转获取信息
			$.ajax({
				url:"http://localhost:8080/web_04/AutoFull.do",
				type:"POST",
				data:"valu="+value,
				dataType:"text",
				async:true,
				success: function(mag){
                   mag servlet中传回来的数据字符串 符合json格式的


					//console.log(mag)
                    转换成arr数组
                   var newlist=$.parseJSON(mag)
                 var mycontent="";
					$.each(newlist,function(index,values){
                    实现拼接
						mycontent+="<div onclick='addClick(this)'>"+values.ntitle+"</div>";
					 
						
					})
					 设置到输入提示框
					$("#tsDiv").html(mycontent);  
				
					
				},
				error:function(){
					alert("请求失败")
				}
			})
			
			
				
			})
			/* 输入框失去焦点 */
			 $("#inSearch").blur(function(){
				//隐藏提示框
				$("#tsDiv").hide(500);
			}) 
			
			/* 输入框获取焦点事件 */
		 	$("#inSearch").focus(function(){
				//显示提示框
				if($("#inSearch").val()!=""){
					$("#tsDiv").show();
				}
				
				
			    
			}) 
		})
		
		function addClick(obj) {
			$("#inSearch").val($(obj).html())
			//隐藏提示框
			$("#tsDiv").hide();
//           无刷新分页搜索的方法
			fenye(1, $(obj).html())
			
		}

3.Servlet界面的编写！！

package com.baidu.server;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.baidu.dao.JxJsonDao;
import com.baidu.dao.XwFbDao;
import com.baidu.entity.NewsXwFb;


@WebServlet("/AutoFull.do")
public class AutoFullServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
  
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	doPost(request, response);
	}
	
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
设置编码格式
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		获取转过来的字段
		String strName=request.getParameter("valu");
		if(strName==null) {
			strName="";
		}
   数据库获取模糊查询数据 测试可以写死  使用 String中提供的包含测试  contains()
   返回类型时布尔值
		List<NewsXwFb> list =new XwFbDao().moHuAll(strName);
		List<NewsXwFb> lixw=new ArrayList<NewsXwFb>();
     JSOn解析不了字段去除  无用可去除 有用可上网找转换的方法  newsXwFb实体类
		for (NewsXwFb newsXwFb : list) {
			newsXwFb.setNimage("无");
			//newsXwFb.setNcontent( newsXwFb.getNcontent().replace("\"", "'"));
			newsXwFb.setNcontent("");
			lixw.add(newsXwFb);
		}
           吧数组转换为JSon字符串
		String content=JSON.toJSONString(lixw);
		
	  response.getWriter().println(content);
	}

}