使用 jQuery+Ajax+MySQL+Servlet 实现不刷新页面数据更新

2017-11-28 19:00:46来源:CSDN作者:larger5人点击

分享

一、前言

对于不完全刷新页面,更新数据的,早在2008年就开始大量应用于各个网页,并给客户带来极佳的体验,特别是网页游戏,很多人应该很有感触,特别是网速不咋的的时候,经常出现页面空白与图景切换的现象。
时至今日,这项技术的使用已是很普遍了,几乎是每个做网页的人都应该会的,也不很难。

下面做一个表单数据的显、增、删,示例一下,注意这技术也不是完全不刷新页面,知识局部刷新页面,加载量小,让人感觉基本没有刷新页面,体验很好。

二、代码功能演示

为了清晰演示,本项目就只设计了一个页面 index.jsp,具体代码可以去我资源点下载

① 进入页面后,显示如下

这里写图片描述
② 点击 开始(上面红框),就会使用 jQuery 包装好的 Ajax 技术,通过一个 url 获取一个 Servlet 从数据库获取信息,并把它显示到页面(下面红框),这个过程并没有全部刷新页面。

这里写图片描述

③ 在输入框中输入信息,点击 Submit ,就会显示到页面上,这个过程也是没有全部刷新页面的,
我是通过给 Submit 按钮 绑定一个JavaScript 函数,
这个函数负责:
Ⅰ、通过 jQuery 获取输人框中的信息,把他传递给后台 的一个 Servlet,这个 Servlet 通过 request.getParameter 获取信息,并把信息插入数据库中。
Ⅱ、通过 jQuery 把刚刚表单的信息生成相应的标签和信息插入开始下面的表单数据表中。
Ⅲ、通过 jQuery 把刚刚输入去的表单数据清空。
提交后的结果如下
这里写图片描述

④ 删除
点击刚刚输进去的信息右边的 Delete 链接,
这里写图片描述
接着点击 确定
同③的原理,也没有全部刷新页面,把数据删除了,
这里写图片描述

⑤以上三个操作console打印的信息,我分别用三个红色框区别
这里写图片描述

三、代码结构

这里写图片描述

四、代码与注释(从上结构从上到下编写)

① PeBean.java 实体类

package bean;public class PeBean {    public PeBean() {        super();        // TODO Auto-generated constructor stub    }    public PeBean(int id, String name, String email, String salary) {        super();        Id = id;        Name = name;        Email = email;        Salary = salary;    }    @Override    public String toString() {        return "PeBean [Id=" + Id + ",hljs-string">", Email=" + Email + ", Salary=" + Salary + "]";    }    public int getId() {        return Id;    }    public void setId(int id) {        Id = id;    }    public String getName() {        return Name;    }    public void setName(String name) {        Name = name;    }    public String getEmail() {        return Email;    }    public void setEmail(String email) {        Email = email;    }    public String getSalary() {        return Salary;    }    public void setSalary(String salary) {        Salary = salary;    }    int Id;    String Name;    String Email;    String Salary;}

②Cin.java 处理表单提交的数据,把它插入数据中

package servl;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.sql.SQLException;import java.sql.Statement;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;import bean.PeBean;public class Cin extends HttpServlet {    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        try {            String Name=request.getParameter("Name");            String Email=request.getParameter("Email");            String Salary=request.getParameter("Salary");            System.out.println("后台获取前端传来的信息如下");            System.out.println(Name);            System.out.println(Email);            System.out.println(Salary);            System.out.println(request.getParameter("Name"));            Class.forName("com.mysql.jdbc.Driver");            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/car", "root", "123");            String sql="INSERT INTO employee(Name,Email,Salary) VALUES(?,?,?)";            PreparedStatement stat = conn.prepareStatement(sql);            stat.setString(1,Name);            stat.setString(2,Email);            stat.setString(3,Salary);            int rs = stat.executeUpdate();            if(rs==1) {                  System.out.println("插入成功");            }else {                  System.out.println("插入失败");            }        } catch (ClassNotFoundException e) {            e.printStackTrace();        } catch (SQLException e) {            e.printStackTrace();        }    }}

③Cll.java 删除信息 Servlet

package servl;import java.io.IOException;import java.io.PrintWriter;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.SQLException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class Cll extends HttpServlet {    // 代号s3,负责删除选中的人    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        try {            String name = request.getParameter("Name");            System.out.println("后台获取前端传来的要删除的人的名字如下");            System.out.println(name);            Class.forName("com.mysql.jdbc.Driver");            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/car", "root", "123");            String sql = "DELETE FROM employee WHERE Name=?";            PreparedStatement stat = conn.prepareStatement(sql);            stat.setString(1, name);            int rs = stat.executeUpdate();            if (rs != 0) {                System.out.println("删除成功");            } else {                System.out.println("删除失败");            }        } catch (ClassNotFoundException e) {            e.printStackTrace();        } catch (SQLException e) {            e.printStackTrace();        }    }}

④Cout.java 把数据库的相关数据传递给前端的Servlet

package servl;import java.io.IOException;import java.io.PrintWriter;import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import java.sql.SQLException;import java.sql.Statement;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;import bean.PeBean;//代号s1,负责将数据库的表中的数据以Json的格式传输给前端public class Cout extends HttpServlet {    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        try {            Class.forName("com.mysql.jdbc.Driver");            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/car", "root", "123");            Statement stmt = conn.createStatement();            ResultSet rs = stmt.executeQuery("SELECT * FROM employee");            List<PeBean> list = new ArrayList<>();            System.out.println("获取数据库的信息如下");            while (rs.next()) {                int Id=rs.getInt("Id");                String Name=rs.getString("Name");                String Email=rs.getString("Email");                String Salary=rs.getString("Salary");                PeBean pebean=new PeBean(Id,Name,Email,Salary);                System.out.println(pebean);                list.add(pebean);            }            Gson gson = new Gson();            String json = gson.toJson(list);            // 4.将JSON字符串作为响应数据返回            response.setContentType("text/json;charset=UTF-8");            PrintWriter writer = response.getWriter();            writer.write(json);        } catch (ClassNotFoundException e) {            e.printStackTrace();        } catch (SQLException e) {            e.printStackTrace();        }    }}

⑤button.js 来自Submit按钮绑定的函数

$("#button1").click(function() {    $("#factory").empty();    $.post("s1", {        "func" : "getNameAndTime" //框架中额外发送给servlet的数据,这里可以随便填,反正不需要用到jso页面的数据    },        function(data) {            for (var i = 0; i < data.length; i++) {                $('<tr></tr>')                    .append('<td>' + data[i].Name + '</td>') // 拼串                    .append('<td>' + data[i].Email + '</td>')                    .append('<td>' + data[i].Salary + '</td>')                    .append('<td><a href="deleteEmp?id="' + Date.now() + '>Delete</a></td>')                    .appendTo('#employeeTable>tbody')                    .find('a')                    .click(clickDelete)            }        }, "json");    $("#factory").slideDown(500);})$('#addEmpButton').click(function() {    //1. 收集输入的数据    var $empName = $('#empName')    var $email = $('#email')    var $salary = $('#salary')    //绿茶:下面才是真正收集数据    var empName = $empName.val()    var email = $email.val()    var salary = $salary.val()    //2. 生成对应的<tr>标签结构, 并插入#employeeTable的tbody中    var $xxx = $('<tr></tr>')        .append('<td>' + empName + '</td>') // 拼串        .append('<td>' + email + '</td>')        .append('<td>' + salary + '</td>')        .append('<td><a href="deleteEmp?id="' + Date.now() + '>Delete</a></td>')        .appendTo('#employeeTable>tbody')        .find('a')        .click(clickDelete)    //3. 清除输入    $empName.val('')    $email.val('')    $salary.val('')    //发送 对象 数据,这里有问题页面就死了    $.post("s2",         {                                     Name : empName,            Email : email,            Salary : salary        }     );});// 给所有删除链接绑定点击监听$('#employeeTable a').click(clickDelete)/*点击删除的回调函数*/function clickDelete() {    var $tr = $(this).parent().parent()    var name = $tr.children(':first').html()    if (confirm('确定删除' + name + '吗?')) {        $tr.remove()        $.post("s3",                 {                                             Name : name                }             );    }    return false}

⑥css.css 样式修饰,其实也没什么,美化方面交给大家,这不是本本文的重点

@CHARSET "UTF-8";table{    border:1;}#factory{     display: none;}

⑦ index.jsp 主界面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%    String path = request.getContextPath();    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()            + path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>new and delete</title><script type="text/javascript" src="script/jquery-1.7.2.js"></script><link rel="stylesheet" type="text/css" href="style/css.css" /></head><body>    <button id="button1">开始</button>    <br />    <br />    <table id="employeeTable">        <tr>            <th>Name</th>            <th>Email</th>            <th>Salary</th>            <th>&nbsp;</th>        </tr>        <div id="factory"></div>    </table>    <div id="formDiv">        <h4>添加新员工</h4>        <table>            <tr>                <td class="word">name:</td>                <td class="inp"><input type="text" name="empName" id="empName" />                </td>            </tr>            <tr>                <td class="word">email:</td>                <td class="inp"><input type="text" name="email" id="email" /></td>            </tr>            <tr>                <td class="word">salary:</td>                <td class="inp"><input type="text" name="salary" id="salary" />                </td>            </tr>            <tr>                <td colspan="2" align="center">                    <button id="addEmpButton" value="abc">Submit</button>                </td>            </tr>        </table>    </div>    <script type="text/javascript" src="script/button.js"></script></body></html>

五、小结

Ajax 这项技术,原生代码曾经让在下头疼不已,幸好有 jQuery 包装好的了,但是在下也是琢磨了很久,才略有感触。希望这篇文章对大家有帮助~
小结结构:
Ⅰ、前端 H、C、J 实现隔离

① JSP / HTML 显示页面
② CSS 处理样式
③ JavaScript 动态交互

Ⅱ、后台 servlet、JSP 实现本分工作

① servlet 只进行数据处理
② JSP 只进行显示页面得到作用

Ⅲ、Json 连接前端后台、JavaBean 作为操作的单位

① 使用 GSON 框架使用 Json
② JavaBean 作为数据传输的单位

Ⅳ、MySQl 保存数据库

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台