欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ajax

程序员文章站 2022-07-12 18:07:20
...
<!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();
    }

}

 

相关标签: ajax