El表达式与JSTl实现登录 AJAX搜索提示的实现

1.同界面登录的实现

所设计的架包下载

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

JSTL架包下载

文件密码:6dva

1.第一步引入jstl 

prefix 命名 可随意
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

2.通过jstl进行判断 保存的session是否存在  action可加上绝对路径${pageContext.request.contextPath}

不存在时 显示表单登录	
 <c:if test="${empty user }">
				
				<form action="LongIndex.do"  method="post">
				<table style="margin-left:5px;"><tr><td></td></tr>
					<tr><td>登陆名:<input name="user" style=" width:110px;"/></tr>
					<tr><td>密码 :<input type="password" name='password' style=" width:110px;"/></td></tr>
                             登录按钮图片
					<tr><td><input type="image" src="image/button01.gif" />

					<img src="image/button02.gif" />
					</td></tr></table>
					</form>
				</c:if>
          存在就显示当前用户 
				<c:if test="${not empty user }">
				
					<span  style="margin-left:20px">
					<a href="#" style=" font-weight:bold; color: order;font-size: 14px">
					当前登录用户:${user.userName }</a></span>
				
				
				
				</c:if> 

3.Servlet 界面进行判断 是否登录成功

package com.baidu.servle;

import java.io.IOException;
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.baidu.bzi.UserBzi;
import com.baidu.bzi.impl.UserBziimpl;
import com.baidu.entity.User;

/**
 * Servlet implementation class LongIndex
 */
配置的地址
@WebServlet("/LongIndex.do")
public class LongIndex extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//调用dopost方法
	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/http;charset=utf-8");
		
		String user=request.getParameter("user");
		String password=request.getParameter("password");
		 UserBzi us=new UserBziimpl();
		User exeuserAll = us.exeuserAll(new User(user, password));
		//获取项目的绝对路径
		String path=this.getServletConfig().getServletContext().getRealPath("/");
		
		if(exeuserAll!=null) {
//             保存User实体 用户登录实体
	    request.getSession().setAttribute("user",exeuserAll);
	    response.sendRedirect("index.jsp");
		}else {
			response.sendRedirect("index.jsp");
			

		}

	}

}

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);
	}

}

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值