ajax(一)

主要是兩個頁面。

一:get.html頁面:

<!DOCTYPE html>
<html>
<head>
    <title>xing</title>
    <meta charset="UTF-8">
</head>
<body>
<!--<h3>學生信息查詢系統</h3>
學號:<input type="text" id="sno"><input type="button" value="查詢" onclick="show(sno.value)"><br>
<br>
<h3 id="msg"></h3>-->

學號:<input type="text" id="sno"><br>
<input type="button" value="查詢" onclick="show(sno.value)"><br>
<h3 id="msg"></h3>
<script>

    function show(id) {
        var a = new XMLHttpRequest();
        //狀態值的改變
        a.onreadystatechange = function () {
            //200網址的狀態碼 和404類似,200代表成功找到 ,404找不到文件
            //xmlHttpRequest對象讀取響應結束  4 a.readyState==4
            if (a.status == 200 && a.readyState == 4) {
                //響應輸出
                //alert(a.responseText)
                document.getElementById("msg").innerHTML = a.responseText;

            }
        }
        //準備通信
        a.open('GET', '/save.action?id=' + id);
        //開始向服務器通信
        a.send();
    }


</script>


</body>
</html>

二:Save.java

package com.zit.servlet;


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.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

@WebServlet("/save.action")
public class Save extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/dt_game?useSSL=false&serverTimezone=PRC&user=root&password=");
            PreparedStatement pst = conn.prepareStatement("select * from stu where id=? order by score desc limit 1");
            pst.setInt(1, Integer.parseInt(req.getParameter("id")));
            ResultSet rs = pst.executeQuery();
            resp.setContentType("text/html;charset=utf-8");
            PrintWriter out = resp.getWriter();
            String n = "";
            int score = 0;
            if (rs.next()) {
                n = rs.getString("name");
                score = rs.getInt("score");
                out.print(n);
                out.print(score);
            } else {
                n = "無此學生信息";
                out.print(n);
            }
            out.flush();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
}

完成。。。。

 

補充點東西:

ajax時鐘顯示:

t.jsp

<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%
    SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
    out.print(sdf.format(new Date()));
%>

</body>
</html>

time.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            setInterval(function () {
                $("#msg").load('t.jsp');
            },1000)
        })
    </script>
</head>
<body>
<h3>alert時鐘顯示</h3>
<h3 id="msg"></h3>


</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章