GDPU JavaWeb Ajax请求

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

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, HttpServletResponseresponse) 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对象rsrs =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