JSP 项目实训网页错乱

为什么会这样

img

img

img

理想状态

img

img

报错

img

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 26316
  Date: 2023/4/5
  Time: 9:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=dege,chrom=1">
  <meta http-equiv="Content-Type" content="text/html";charset="utf-8"/>
  <meta name="renderer" content="webkit">
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="format-detection" content="telephone=no"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximun-scale=1.0,user-scalable=no"/>
  
  <title>ChrosWine红酒有限公司title>
  <link rel="stylesheet" href="css/orbit-1.2.3.css">
  <link rel="stylesheet" href="css/jq22.css">
  <link rel="stylesheet" type="text/css" href="css/base.css"/>
  <script src="js/jquery.min.js">script>
  <script type="text/javascript" src="js/jquery.orbit-1.2.3.js">script>
  <script type="text/javascript" src="js/base.js">script>
  
  
  <script type="text/javascript">
    $(window).load(function (){
      $('#featured').orbit();
    });
  script>
head>
<body>
<div class="red_wine_box">
  <img src="${pageContext.request.contextPath}/Home/image/header.png"/>
  
  <div class="navigation_box">
    <a href="${pageContext.request.contextPath}/Home/index.jsp">网站首页a>
    <a href="${pageContext.request.contextPath}/Home/company_profile.jsp">公司简介a>
    <a href="${pageContext.request.contextPath}/servlet/HomeServlet?method=commodity">产品展示a>
    <a href="${pageContext.request.contextPath}/servlet/HomeServlet?method=knowlege">红酒知识a>
    <a href="${pageContext.request.contextPath}/servlet/HomeServlet?method=news">公司资讯a>
    <a href="${pageContext.request.contextPath}/servlet/HomeServlet?method=recruit">招贤纳士a>
  div>
  
  <div class="container">
    <div id="featured">
      <img src="${pageContext.request.contextPath}/Home/image/banner.jpg"/>
      <img src="${pageContext.request.contextPath}/Home/image/banner2.jpg"/>
      <img src="${pageContext.request.contextPath}/Home/image/banner3.jpg"/>
    div>
  div>
  
  <div class="content_boxs">
    
    <div class="nav_left">
      
      <div class="manage_products_title">
        <img src="${pageContext.request.contextPath}/Home/image/manage_products_title.png"/>
      div>
      <ul class="manage_products_list">
        <c:choose>
          <c:when test="${not empty result.clist}">
            <c:forEach var="result" items="${result.clist}">
              <a href="${pageContext.request.contextPath}/servlet/HomeServlet?method=search_commodity&cid=${result.id}"><li class="manage_products_unchecked">${result.title}li> a>
            c:forEach>
          c:when>
          <c:otherwise>
            <li>当前数据为空！li>
          c:otherwise>
        c:choose>
      ul>
      
      <div class="search_box">
        <div class="manage_products_title">
          <img src="${pageContext.request.contextPath}/Home/image/product_search_title.png"/>
        div>
        <div class="search">
          <form method="post" action="${pageContext.request.contextPath}/servlet/HomeServlet?method=search_commodity" style="text-align: center">
            <div id="select" class="bg1">
              <div class="search_sign" id="country">请选择分类div>
              <ul id="option" class="hide">
                <c:choose>
                  <c:when test="${not empty result.clist}">
                    <c:forEach var="result" items="${result.clist}">
                      <li data-id="${result.id}">${result.title}li>
                    c:forEach>
                  c:when>
                  <c:otherwise>
                    <li>当前数据为空！li>
                  c:otherwise>
                c:choose>
              ul>
            div>
            <input type="text" name="cid" class="hide" id="cid" value=""/>
            <input type="text" placeholder="请输入名称" class="search_name" name="search_name"/>
            <input class="search_click" value="搜索"/>
          form>
        div>
      div>
    div>
    
    <div class="right_box">
      
      <div class="manage_products_title" style="width: 850px">
        <img src="${pageContext.request.contextPath}/Home/image/product_recommendation.png"/>
      div>
      
      <c:choose>
        <c:when test="${not empty result.list}">
          <c:forEach var="result" items="${result.list}">
            <div class="goods">
              
              <a href="${pageContext.request.contextPath}/servlet/HomeServlet?id=${result.id}&method=commodity_detail">
                <img src="${pageContext.request.contextPath}/upload/${result.photo}"/>
              a>
              <p>${result.title}p>
              <p>价格：${result.price} RMBp>
            div>
          c:forEach>
        c:when>
        <c:otherwise>
          <li>当前数据为空！li>
        c:otherwise>
      c:choose>
      
      <div class="page_box" id="${result.url}">
        
        <ul>
          <li class="page_choice"><a href="${pageContext.request.contextPath }/servlet/HomeServlet?currentPage=1&method=${(not empty result.cid) ? result.url : 'commodity'}" class="list_a">首页a>li>
          <li class="page_choice"><a href="${pageContext.request.contextPath }/servlet/HomeServlet?currentPage=${result.PageDate.currentPage-1}&method=${(not empty result.cid) ? result.url : 'commodity'}" class="list_a">上一页a>li>
          <li class="page_num">${result.PageDate.currentPage}/${result.PageDate.totalPage}li>
          <li class="page_choice"><a href="${pageContext.request.contextPath }/servlet/HomeServlet?currentPage=${result.PageDate.currentPage+1}&method=${(not empty result.cid) ? result.url : 'commodity'}" class="list_a">下一页a>li>
          <li class="page_choice"><a href="${pageContext.request.contextPath }/servlet/HomeServlet?currentPage=${result.PageDate.totalPage}&method=${(not empty result.cid) ? result.url : 'commodity'}" class="list_a">尾页a>li>
        ul>
      div>
    div>
  div>

div>

<div class="foot">
  <div class="foot_img">
    <img src="${pageContext.request.contextPath}/Home/image/foot_a.png"/>
    <img src="${pageContext.request.contextPath}/Home/image/foot_b.png"/>
    <img src="${pageContext.request.contextPath}/Home/image/foot_c.png"/>
    <img src="${pageContext.request.contextPath}/Home/image/foot_d.png"/>
  div>
  <p>ChrosWine红酒有限公公司p>
  <p>公司地址：北京市海淀区大钟寺华杰大厦4C9室 邮编：100098p>
  <p>联系电话：010-62137141 (传真）62131450 电子邮箱：changchunying@tom.com 京ICP备14058053p>
div>
body>
<script>
  var  $aLi = $("#option li");
  var $country = $("#country");
  var $select = $("#select");
  var $option = $("#option");
  $select.click(function (){
    $select.stop().toggleClass("bg2");
    $option.stop().slideToggle();
  })
  $aLi.each(function (){
    $(this).hover(function (){
      $(this).css({color:"#000"})
    },function () {
      $(this).css({backgroundColor:"#fff",color: "#9fa0a0"})
    })
    $(this).click(function () {
      $country.text($(this).text());
      $country.attr("value",$(this).text());
      var cid = $(this).attr("data-id");
      $("#cid").attr("value",cid);
    })
  })
script>
html>

css加载失败，题主看下是不是下面文章提到的

https://blog.csdn.net/rj2012001/article/details/121485593

原图：

img

修改:

img

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以看下这个问题的回答https://ask.csdn.net/questions/1102674
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：JSP中怎样使表格颜色交替变换
  • 除此之外, 这篇博客: JSP验证码的实现中的 如果点击验证码会自动更新验证码 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    在这里插入图片描述
    在这里插入图片描述
    下面是实现的具体代码【index.jsp】

    
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="jquery-1.12.4.js" type="text/javascript"></script><!-- 注意适用jquery实现的，所以要引用jQuery -->
<script type="text/javascript">
	function reloadCheckImg() {
    	$("img").attr("src", "img.jsp?t=" + (new Date().getTime()));//刷新验证码
	}

	$(document).ready(function() {
		$("#checkcodeId").blur(function() {	//一旦输入框失去了焦点，就会响应这个函数，去验证
			var $checkcode = $("#checkcodeId").val();
		    //文本框中输入的值发送到服务器，服务器获取文本框的值，和真实验证码图片的值对比
			$.post("CheckCodeServlet",//服务器地址
			"checkcode=" + $checkcode, function(result) {
				$("#tip").html(result);
				//alert(result);
			})
		})
	})
</script>
<body>
	验证码：
	<input type="text" name="checkcode" id="checkcodeId" size="4" />
	<a href="javascript:reloadCheckImg();"><img src="img.jsp" /></a>
	<!-- 验证码 -->
	<span id="tip"></span>
</body>
</html>

    下面是img.jsp

    <%@ page language="java" contentType="image/jpeg; charset=UTF-8"%>
<%@ page import="java.util.*,java.awt.Color,java.awt.image.BufferedImage,java.awt.Graphics,javax.imageio.*,java.awt.*"%>
<%!
	public Color getColor() {//实现随机产生颜色
		Random ran = new Random();
		int r = ran.nextInt(256);
		int g = ran.nextInt(256);
		int b = ran.nextInt(256);
		return new Color(r, g, b);
	}

    public String getNum() {	//随机产生1000-9999验证码
		int ran = (int) (Math.random() * 9000) + 1000;
		return String.valueOf(ran);
	}%>
	
	<%
	//禁止缓存，防止验证码过期
	response.setHeader("Pragma","no-cache");
	response.setHeader("Cache-control","no-cache");
	response.setHeader("Expires", "0");
	
	//绘制验证码
	BufferedImage image=new BufferedImage(90,40,BufferedImage.TYPE_INT_RGB);
	//画笔
	Graphics graphics= image.getGraphics();
	//绘制干扰线条
	graphics.fillRect(0,0, 90, 40);
	for(int i=0;i<70;i++){//60是指随机产生60条干扰线
		Random ran=new Random();
	  int xBegin=ran.nextInt(90);//产生小于90的随机整数
	  int yBegin=ran.nextInt(40);//产生小于40的随机整数
	  int xEnd=ran.nextInt(xBegin+10);
	  int yEnd=ran.nextInt(yBegin+10);
	    graphics.setColor(getColor());
	    graphics.drawLine(xBegin, yBegin, xEnd, yEnd);
	
	}
	graphics.setFont(new Font("seif",Font.BOLD,23));//给随机数设置字体样式
	//绘制验证码
	graphics.setColor(Color.black);//设置验证码的颜色
	String checkCode=getNum();//随机产生的4个数字
	StringBuffer sb=new StringBuffer();
	for(int i=0;i<checkCode.length();i++){
		sb.append(checkCode.charAt(i)+" ");
		//验证码的每一个数值【只是为了给每个数字后面加一个空格】
	}

	graphics.drawString(sb.toString(),10,25);
	//20，25指的是随机数的位置【宽，高】
	session.setAttribute("checkCode",checkCode);
	//将验证码真实值，保存到session中，供使用时比较真实性
    ImageIO.write(image,"jpeg",response.getOutputStream());
	//真实的产生图片
	out.clear();
	//关闭
	out=pageContext.pushBody();
	%>

    下面是CheckCodeServlet.java

    package servlet;

import java.io.IOException;
import java.io.PrintWriter;

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

@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public CheckCodeServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		// 获取用户输入的验证码
		String checkcodeClient = request.getParameter("checkcode");
        //服务端验证码值
		String checkcodeServer = (String) request.getSession().getAttribute("checkCode");
		if (checkcodeClient.equals(checkcodeServer)) {

			response.setContentType("text/html;charset=UTF-8");
			PrintWriter pw = response.getWriter();
			pw.println("验证码正确");
		} else {

			response.setContentType("text/html;charset=UTF-8");
			PrintWriter pw = response.getWriter();
			pw.println("验证码失败");
		}
	}

}

    希望有帮助

  • 您还可以看一下 雷玉广老师的JSP极简实操入门课程中的 JSP概述-中文编码小节, 巩固相关知识点

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^