GDPU JavaWeb Ajax请求_2、应用ajax实现无刷新、每隔10分钟从数据库获取一次最新公告,并滚动显示。-优快云博客

本文链接：https://blog.youkuaiyun.com/visitorcsdn/article/details/139547652

异步请求可以提升用户体验并优化页面性能。

ajax登录

实现ajax异步登录。

注意，ajax用到了jQuery库，先下载好相应的js库，然后复制导入到工程的web目录下，最好与你的前端页面同一层级。然后编写时路径一定要找准，“pageContext.request.contextPath” 指的是应用根目录，如果不会找，可以看这里。再找不到，也可以试一下写静态资源地址。然后url也要写对，否则响应不了。如果浏览器没响应，可以点F12看控制台报错的信息。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/jquery-3.7.1.js"></script>
<%--    <script type="text/javascript"--%>
<%--    src="https://code.jquery.com/jquery-3.7.1.js"></script>--%>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                $.ajax({
                    type:"post",            //提交方式
                    url:'http://localhost:8080/sysql_war_exploded/AJAXServlet',
                    data:{
                        userName:  $("#userName").val(),
                        password:  $("#password").val()
                    },                       //data中的内容会自动的添加到url后面
                    dataType: "text",         //返回数据的格式
                    success:function(a){       //请求成功后执行的函数
                        if(a=="true"){
                            $('#suss').html("登录成功!")
                        }else{
                            $('#suss').html("登录失败!")
                        }
                    },
                    error :function () {       //请求失败后执行的函数
                        alert("请求失败");
                    },
                });
            });
        });
    </script>
</head>
<body>
<div>
    <div>
        <ul>
            <li>用户名：</li>
            <li><input id="userName" name="userName" type="text" /></li>
        </ul>
    </div>
    <div>
        <ul>
            <li>密码：</li>
            <li><input id="password" name="password" type="password"/></li>
        </ul>
    </div>
    <div>
        <ul>
            <li><button>登录</button></li>
        </ul>
    </div>
    <div id="suss"></div>
</div>
</body>
</html>

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 java.io.IOException;
import java.io.PrintWriter;
import java.util.Map;

@WebServlet(name = "AJAXServlet", urlPatterns = "/AJAXServlet")
public class AJAXServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse
            response) throws ServletException, IOException {
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        boolean flag = false;
        Map<String, String[]> parameterMap = request.getParameterMap();
        if ((request.getParameter("userName")).equals("itcast")
                && request.getParameter("password").equals("123")) {
            flag = true;            //登录成功标志
        } else {
            flag = false;
        }
        response.setContentType("text/html;charset=utf-8");
        //使用PrintWriter方法打印登录结果
        PrintWriter out = response.getWriter();
        out.print(flag);
        out.flush();
        out.close();
    }
}

ajax公告显示

要求应用ajax实现无刷新、每隔10分钟从数据库获取一次最新公告，并滚动显示。

注意，以下代码并不是mvc模式。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>index</title>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/jquery-3.7.1.js"></script>
    <script language="JavaScript">
        function getInfo() {
            $.get("http://localhost:8080/sysql_war_exploded/getInfo.jsp?nocache="+new  Date().getTime(),function (data) {
                $("#showInfo").html(data);
            });
        }
        $(document).ready(function () {
            getInfo();//调用getInfo()方法获取公告信息
            window.setInterval("getInfo()",600000);
        })
    </script>
</head>
<body>
<section>
    <marquee id="showInfo" direction="up" scrollamount="3">
    </marquee>
</section>
</body>
</html>

<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@page import="java.sql.*" %>
<jsp:useBean id="conn" class="Dao.ConnDB"
             scope="page"></jsp:useBean>
<ul>
    <%
        ResultSet rs=conn.executeQuery("select title from info order by id desc");
        if(rs.next()){
            do{
                out.print("<li>"+rs.getString(1)+"</li>");
            }while (rs.next());
        }else{
            out.print("<li>暂无公告信息！</li>");
        }
    %>
</ul>

package Dao;
import java.io.InputStream;
import java.sql.*;
import java.util.Properties;
public class ConnDB {
    public Connection conn =null;    //声明Connection对象的实例
    public Statement stmt = null;    //声明Statement对象的实例
    public ResultSet rs = null;      //声明ResultSet对象的示例
    //指定资源文件保存的位置
    private static String propFileName= "connDB.properties";
    //创建并实例化Properties对象的实例
    private static Properties prop=new Properties();
    //定义并保存数据库驱动的变量
    private static String dbClassName ="";
    private static String dbUrl="";
    private static String user="";
    private static String pass="";
    /**
     * 构造方法
     */
    static{
        try{
            //将Properties文件读取到InputStream对象中
            InputStream in=ConnDB.class.getResourceAsStream(propFileName);
            prop.load(in);
            dbClassName = prop.getProperty("DB_CLASS_NAME"); //获取数据库驱动
            dbUrl = prop.getProperty("DB_URL");  //获取数据库驱动
            user = prop.getProperty("user");  //获取数据库账号
            pass = prop.getProperty("pass");  //获取数据库密码
        }catch (Exception e){
            e.printStackTrace();                             //输出异常信息
        }
    }
    /**
     * 连接数据库
     */
    public  Connection getConection(){
        try{
            Class.forName(dbClassName).newInstance(); //装载数据库驱动
            //建立与数据库URL中定义的数据库的连接
            conn = DriverManager.getConnection(dbUrl,user,pass);
        }catch (Exception ee){
            ee.printStackTrace();
        }
        if(conn==null){
            System.err.print("连接失败");
        }
        return conn;
    }
    /**
     * 执行查询
     */
    public ResultSet executeQuery(String sql){
        try{
            conn=getConection();
            stmt =conn.createStatement
                    (ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
            //执行SQL语句，并返回一个ResultSet对象rs
            rs =stmt.executeQuery(sql);
        }catch (SQLException ex){
            System.err.print(ex.getErrorCode());
        }
        return rs;
    }
    /**
     * 关闭数据库的连接
     */
    public void close(){
        try{
            if(rs!=null){
                rs.close();
            }
            if (stmt!=null){
                stmt.close();
            }
            if (conn!=null){
                conn.close();
            }
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}

DB_CLASS_NAME =com.mysql.cj.jdbc.Driver
DB_URL=jdbc:mysql://127.0.0.1:3306/dbjsp?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
user =root
pass =123456