ajax-CSDN博客

本文链接：https://blog.csdn.net/zmz225/article/details/83008819

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="js/jquery-3.0.0.min.js"></script>
    <script>
        $(function () {
            function show() {
                $.ajax({
                    type: "POST",
                    url: "/show.do",
                    dataType: "json",
                    data:{action:'show'},
                    success: function (d) {
                        $('#st').find('tr:not(:first)').remove();
                        for (i in d) {
                            $('#st').append("<tr><td>" + d[i].id + "</td><td>" + d[i].name + "</td><td>" + d[i].score + "</td><td>" + d[i].dept + "</td><td><a href='javascript:void(0)' did='"+d[i].id+"'>删除</a></td></tr>");
                        }

                        $('a[did]').click(function(){
                            var nnn = $(this).parent().prev().prev().prev().html();
                            if(confirm('是不是删除:'+ nnn +'?')) {
                                var did = $(this).attr('did');
                                $.get('/show.do', {action: 'delete', id: did},show)

                            }
                        });
                    }
                });
            }
            show();


            $('#btnsave').click(function(){
                    $.ajax({
                        type: 'POST',
                        url: '/show.do',
                        dateType: 'text',
                        data: {action: 'save', name: $('#name').val(), score: $('#score').val(), dept: $('#dept').val(), birthday: $('#birthday').val(), money: $("#money").val()},
                        success: show
                    });

            });

            $('#name').keyup(function(){
                   var nn = $(this).val();
                   $.ajax({
                       type:'post',
                       url:'/show.do',
                       dataType:'text',
                       data:{action:'checkstu',name:nn},
                       success:function(d){
                            if(d=='1'){
                                $('#info').css('color','green').html("恭喜，此姓名可以使用...");
                            }else{
                                $('#info').css('color','red').html("注册失败，此姓名已经被使用...");
                            }
                       }
                   })
            });
        })
    </script>
    <style>
        table.myt {
            border: none;
            border-collapse: collapse;
            color: #333;
            width: 800px;
            margin: 20px auto;
        }

        table.myt td {
            border: 1px solid #dedede;
            text-align: center;
            padding: 15px 0;
            line-height: 21px;
            color: #333;
        }

        table.myt tr.title {
            border-collapse: collapse;
            font-weight: bold;
            background-color: #f7f7f7;
            text-align: center;
            color: #333;
            width: 789px;
        }
    </style>
</head>
<body>
<h3>添加学生数据</h3>
姓名：<input type="text" id="name" value="Jack">&nbsp;<span id="info"></span><br>
成绩：<input type="text" id="score" value="88"><br>
出生日期：<input type="text" id="birthday" value="1985-10-25">1985-10-26<br>
金额：<input type="text" id="money" value="200"><br>
专业：<input type="text" id="dept" value="计算机网络"><br>
<input type="button" value="添加保存" id="btnsave">
<hr>
<br>
<table id="st" class="myt">
    <tr class="title">
        <td>学号</td>
        <td>姓名</td>
        <td>成绩</td>
        <td>专业</td>
        <td>基本操作</td>
    </tr>
</table>
</body>
</html>

package com.servlet;

import com.alibaba.fastjson.JSONObject;

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;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * Created by Administrator on 2018-09-12.
 */
@WebServlet("/show.do")
public class Show extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out = resp.getWriter();
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/db?useSSL=false&serverTimezone=PRC&user=root");
            String action = req.getParameter("action");
            if ("save".equals(action)) {
                PreparedStatement ast = conn.prepareStatement("insert into stuu values(null,?,?,?,?,?)");
                ast.setString(1, req.getParameter("name"));
                ast.setInt(2, Integer.parseInt(req.getParameter("score")));
                ast.setString(3, req.getParameter("birthday"));
                ast.setDouble(4, Double.parseDouble(req.getParameter("money")));
                ast.setString(5, req.getParameter("dept"));
                ast.executeUpdate();
            } else if (req.getParameter("term")!=null) {

                PreparedStatement ppt = conn.prepareStatement("select name from stuu where name like ? limit 5");
                ppt.setString(1,"%"+ req.getParameter("term") +"%");
                List<String> str = new ArrayList<String>();
                ResultSet rss = ppt.executeQuery();
                while(rss.next()){
                    str.add(rss.getString("name"));
                }
                out.print(JSONObject.toJSON(str));

            } else if ("checkstu".equals(action)) {
                PreparedStatement cst = conn.prepareStatement("select count(*) from stuu where name=?");
                cst.setString(1,req.getParameter("name"));
                ResultSet st = cst.executeQuery();
                st.next();
                if(st.getInt(1)==0){
                    out.print("1");
                }else{
                    out.print("0");
                }
            } else if ("delete".equals(action)) {
                PreparedStatement dst = conn.prepareStatement("delete from stuu where id=?");
                dst.setInt(1, Integer.parseInt(req.getParameter("id")));
                dst.executeUpdate();
            } else if ("show".equals(action)) {
                PreparedStatement pst = conn.prepareStatement("select id,name,score,dept from stuu order by id desc");
                ResultSet rs = pst.executeQuery();

//            StringBuilder s = new StringBuilder();
//            s.append("[");
//            while(rs.next()){
//                String json = String.format("{\"id\":%d,\"name\":\"%s\",\"score\":%d,\"dept\":\"%s\"},",rs.getInt("id"),rs.getString("name"),rs.getInt("score"),rs.getString("dept"));
//                s.append(json);
//            }
//            s.replace(s.length()-1,s.length(),"]");
//            out.print(s.toString());

                List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
                while (rs.next()) {
                    Map<String, Object> map = new HashMap<String, Object>();
                    map.put("id", rs.getInt("id"));
                    map.put("name", rs.getString("name"));
                    map.put("score", rs.getInt("score"));
                    map.put("dept", rs.getString("dept"));
                    list.add(map);
                }
                out.print(JSONObject.toJSON(list));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        out.flush();
        out.close();
    }

}