异步请求可以提升用户体验并优化页面性能。
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
⛽ 还有个网站设计的自立更新了喔，摸完这个shui课了，fighting(～￣▽￣)～
实验心得
划了个不平淡的蛋。
