当前位置: 代码迷 >> 综合 >> JavaWeb使用ajax实现动态删除操作
  详细解决方案

JavaWeb使用ajax实现动态删除操作

热度:56   发布时间:2024-02-26 23:43:43.0

编写login.jsp

<body>

<form name="login" method="post" action="servlet/LoginServlet">

 用户名:<input type="text" name="userName"></input>

 密码:<input type="password" name="pwd"/>

 <input type="submit" value="提交"/>

</form>

</body>

编写LoginServlet

1.web.xml配置

<servlet>

<servlet-name>LoginServlet</servlet-name>

<servlet-class>cn.com.test.servlet.LoginServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>LoginServlet</servlet-name>

<url-pattern>/servlet/LoginServlet</url-pattern>

</servlet-mapping>

2.LoginServlet关键代码:

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

String userName=request.getParameter("userName");

String pwd=request.getParameter("pwd");

if(userName.equals("admin") && pwd.equals("admin")){

StudentDao stuDao=new StudentDao();

List<Student> stuList=stuDao.findAllStudent();

request.setAttribute("stuList", stuList);

request.getRequestDispatcher("/OperatorStudent.jsp").forward(request, response);

   }

}

OperatorStudent.jsp编写

<head>

<script type="text/javascript" src="/test/js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">

function OperatorUser(id) {

$.ajax({

type : "post",

url : "DelStudent",

dateType : "text",

data : {

id : id

},

success : function(data) {

    $("#tr_"+id.substring(4)).remove();

alert("操作成功!");

},

error : function() {

alert("网络异常,请稍后重试");

}

});

}

</script>

<title>My JSP 'OperatorStudent.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

</head>

<body>

<h3>学生信息</h3>

<hr>

<table border="1">

<tr>

<td>学号</td>

<td>姓名</td>

<td>年龄</td>

<td>地址</td>

<td>操作</td>

</tr>

<%

List stuList = (List) request.getAttribute("stuList");

if (stuList != null && stuList.size() > 0) {

for (int i = 0; i < stuList.size(); i++) {

Student stu = (Student) stuList.get(i);

%>

<tr id="tr_<%=stu.getId()%>">

<td><%=stu.getId()%></td>

<td><%=stu.getUserName()%></td>

<td><%=stu.getAge()%></td>

<td><%=stu.getAddress()%></td>

<td><input type="button" id="del_<%=stu.getId()%>" value="删除"

οnclick="OperatorUser(this.id)"> <input type="button"

id="upd_<%=stu.getId()%>" value="更新"></td>

</tr>

<%

}

}

%>

</table>

</body>

</html>

编写DelStudent

web.xml配置:

<servlet>

<servlet-name>DelStudent</servlet-name>

 <servlet-class>cn.com.test.servlet.DelStudent</servlet-class>

 </servlet>

<servlet-mapping>

<servlet-name>DelStudent</servlet-name>

<url-pattern>/servlet/DelStudent</url-pattern>

</servlet-mapping>

代码:

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

String id = request.getParameter("id");

if (id.substring(0, 4).equals("del_")) {

int stuId = Integer.parseInt(id.substring(4));

StudentDao stuDao = new StudentDao();

int result = stuDao.deleteUserById(stuId);

if (result > 0) {

List<Student> stuList = stuDao.findAllStudent();

request.setAttribute("stuList", stuList);

request.getRequestDispatcher("/OperatorStudent.jsp").forward(

request, response);

}

} else {

}

}

实体类Student

 

public class Student {

private int id;

private String userName;

private int age;

private String address;

//getter setter...

链接数据库,关闭数据库的操作

public class BaseDao {

private final static String Driver="com.mysql.jdbc.Driver.class";

 //数据库连接字符串

private final static String URL="jdbc:mysql://localhost:3306/test1";

//数据库登录用户名

private final static String USERNAME = "root";

//登录密码

private final static String PASSWORD = "root";

protected  Connection con=null;

protected PreparedStatement pstm = null;

protected ResultSet rs =null;

String sql =null;

/**

* 获得数据库连接

* @return 数据库连接对象

*/

public  Connection getConnection(){

try {

//加载驱动

Class.forName("com.mysql.jdbc.Driver");

//获得数据库连接

con = DriverManager.getConnection(URL, USERNAME, PASSWORD);

} catch (ClassNotFoundException e) {

e.printStackTrace();

} catch (SQLException e) {

e.printStackTrace();

}

return con;

}

//释放数据库资源

public void closeConnection(){

try{

if(rs!=null){

rs.close();

}

if(pstm !=null){

pstm.close();

}

if(con!=null && con.isClosed()==false){

con.close();

}

}catch(Exception e){

e.printStackTrace();

}

}

}

对数据的查询及删除

//查询学生信息

public List<Student> findAllStudent(){

List<Student> studentList=new ArrayList();

String sql="select * from student";

try{

con=super.getConnection();

pstm=con.prepareStatement(sql);

rs=pstm.executeQuery();

while(rs.next()){

Student stu=new Student();

stu.setId(rs.getInt("id"));

stu.setUserName(rs.getString("userName"));

stu.setAge(rs.getInt("age"));

stu.setAddress(rs.getString("address"));

studentList.add(stu);

}

}catch(Exception e){

e.printStackTrace();

}

finally{

super.closeConnection();

}

return studentList;

}

//删除信息

public int deleteUserById(int id){

int result=0;

String sql="delete from student where id=?";

try{

con=super.getConnection();

pstm=con.prepareStatement(sql);

pstm.setInt(1,id);

result=pstm.executeUpdate();

}catch(Exception e){

e.printStackTrace();

}

finally{

super.closeConnection();

}

return result;

}

以上为ajax实现动态实现删除的方法之一,摘自百度,作者:加贝0501;

主要以学习为目的,侵删。

  相关解决方案