AJAX 自学练习无刷新提交并修改数据库数据并显示

湛蓝之海

request.jsp页面中有rocarsId,和ccrn两个text。
对应在数据库中表格 rocars表的msg_id,ccrn两个字段。现在要实现在界面上修改ccrn的值，ajax提交到response.jsp页面，并调用RocarsEntiy.updateCcrn方法更新对应的ccrn，最后无刷新显示
代码：
request.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script language="javascript"><!-- 
function GetXmlHttpObject(){ 
  var xmlHttp = null; 
  try{ 
    xmlHttp = new XMLHttpRequest(); 
  }catch(e){ 
    try{ 
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
    }catch(e){ 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
  } 
  return xmlHttp; 
} 
function updateCcrn(rocarsId,ccrn){ 
alert(rocarsId) 
alert(ccrn) 
  xmlHttp = GetXmlHttpObject(); 
  if(xmlHttp == null){ 
    alert ("you browser don't support the ajax"); 
     return; 
  } 
  var url = "./response.jsp"; 
  url = url + "?rocarsId="+ rocarsId; 
  url = url + "&ccrn="+ ccrn; 
  url = url + "&sid ="+ Math.random(); 
  xmlHttp.onreadystatechange = stateChanged; 
  xmlHttp.open("GET", url, true); 
  xmlHttp.send(null); 
} 
function getCcrn(str){ 
  xmlHttp = GetXmlHttpObject(); 
  if(xmlHttp == null){ 
    alert ("you browser don't support the ajax"); 
     return; 
  } 
  var url = "./response.jsp"; 
  url = url + "?q="+ str; 
  url = url + "&sid ="+ Math.random(); 
  xmlHttp.onreadystatechange = stateChanged; 
  xmlHttp.open("GET", url, true); 
  xmlHttp.send(null); 
} 
function stateChanged() 
{ 
  if(xmlHttp.readyState==4) 
  { 
    document.getElementById("rocarsccrn").value = xmlHttp.responseText; 
  } 
} 
// --></script> 
</head> 
<body> 
<form name="form1" action="" method="post"> 
  <label>rocarsId:</label><input type="text" name="rocarsId" value="140" /> 
  <label>ccrn:</label><input type="text" id="rocarsccrn" name="rocarsccrn" onchange="updateCcrn(document.form1.rocarsId.value,this.value)"/> 
</form> 
</body> 
</html>

response.jsp

<%@ page language="java" contentType="text/plain; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<%@ page import="com.lwf.eus.util.*,java.util.*,com.lwf.eus.entity.*,com.lwf.eus.bean.*" %> 
<% 
  String rocarsId = request.getParameter("rocarsId"); 
  String ccrn = request.getParameter("ccrn"); 
  System.out.println("rocarsId:" + rocarsId); 
  System.out.println("ccrn:" + ccrn); 
  RocarsEntity.updateCcrnById(rocarsId,ccrn); 
  out.print(ccrn); 
%>

RocarsEntity.java

package com.lwf.eus.entity; 
import java.sql.Connection; 
import java.sql.ResultSet; 
import java.sql.SQLException; 
import java.sql.Statement; 
import java.util.Vector; 
import com.lwf.eus.bean.RocarsBean; 
import com.lwf.eus.util.ConnectionManager; 
public class RocarsEntity { 
  public static Vector getRocarsList() { 
    Vector vRocars = new Vector(); 
    //Connection conn = ConnectionManager.getConnection(); 
    Connection conn = ConnectionManager.getConnectionFromDS(); 
    Statement st = ConnectionManager.createStatement(conn); 
    String sql = "select msg_id,ccrn from rocars"; 
    ResultSet rs = null; 
    try { 
      rs = st.executeQuery(sql); 
      while (rs.next()) { 
        RocarsBean rocars = new RocarsBean(); 
        rocars.setRocarsId(rs.getString(1)); 
        rocars.setCcrn(rs.getString(2)); 
        vRocars.addElement(rocars); 
      } 
    } catch (SQLException e) { 
      e.printStackTrace(); 
    } finally { 
      try { 
        if (rs != null) { 
          rs.close(); 
        } 
      } catch (SQLException e) { 
        e.printStackTrace(); 
      } 
      try { 
        if (st != null) { 
          st.close(); 
        } 
      } catch (SQLException e) { 
        e.printStackTrace(); 
      } 
      try { 
        if (conn != null) { 
          conn.close(); 
        } 
      } catch (SQLException e) { 
        e.printStackTrace(); 
      } 
      return vRocars; 
    } 
  } 
  public static RocarsBean getRocarsListById(String rocarsId){ 
    Connection conn = ConnectionManager.getConnectionFromDS(); 
    Statement st = ConnectionManager.createStatement(conn); 
    String sql = "select * from rocars where msg_id=" + rocarsId; 
    ResultSet rs = null; 
    RocarsBean rocars= null; 
    try { 
      rs = st.executeQuery(sql); 
      rocars = new RocarsBean(); 
      while (rs.next()) {         
        rocars.setRocarsId(rs.getString("msg_id")); 
        rocars.setCcrn(rs.getString("ccrn")); 
      } 
    } catch (SQLException e) { 
      e.printStackTrace(); 
    } finally { 
      try { 
        if (rs != null) { 
          rs.close(); 
        } 
      } catch (SQLException e) { 
        e.printStackTrace(); 
      } 
      try { 
        if (st != null) { 
          st.close(); 
        } 
      } catch (SQLException e) { 
        e.printStackTrace(); 
      } 
      try { 
        if (conn != null) { 
          conn.close(); 
        } 
      } catch (SQLException e) { 
        e.printStackTrace(); 
      } 
      return rocars; 
    } 
  } 
  public static void updateCcrnById(String rocarsId, String ccrn) 
  { 
    Connection conn = null; 
    Statement stmt = null; 
    try { 
      conn = ConnectionManager.getConnectionFromDS(); 
      stmt = ConnectionManager.createStatement(conn); 
      String sqlStr = "update rocars set ccrn= '"+ ccrn + "'" + "where msg_id=" + rocarsId ; 
      stmt.executeUpdate(sqlStr); 
    } catch (SQLException e) { 
      // TODO Auto-generated catch block 
      e.printStackTrace(); 
    } finally{ 
      try { 
        if (stmt != null) { 
          stmt.close(); 
        } 
      } catch (SQLException e) { 
        e.printStackTrace(); 
      } 
      try { 
        if (conn != null) { 
          conn.close(); 
        } 
      } catch (SQLException e) { 
        e.printStackTrace(); 
      } 
    } 
  } 
}

ConnectionManager.java
这里可以直接使用JDBC也可以调用weblogic的数据源JNDI。

package com.lwf.eus.util; 
import java.sql.Connection; 
import java.sql.DriverManager; 
import java.sql.SQLException; 
import java.sql.Statement; 
import javax.naming.Context; 
import javax.naming.InitialContext; 
import javax.naming.NamingException; 
import javax.sql.DataSource; 
public class ConnectionManager { 
  public static Connection getConnection(){ 
    Connection conn = null; 
    String url = "jdbc:postgresql://192.168.0.180/getseus"; 
    String userName = "getsdbadmin"; 
    String pwd = "powerdb"; 
    try { 
      Class.forName("org.postgresql.Driver").newInstance(); 
      conn = DriverManager.getConnection(url,userName,pwd); 
    } catch (SQLException e) { 
      e.printStackTrace(); 
    } catch (ClassNotFoundException e) { 
      e.printStackTrace(); 
    } catch (InstantiationException e) { 
      e.printStackTrace(); 
    } catch (IllegalAccessException e) { 
      e.printStackTrace(); 
    } catch (Exception e){ 
      e.printStackTrace(); 
    } 
    return conn; 
  } 
  public static Connection getConnectionFromDS(){ 
    Connection conn = null; 
    Context ctx = null; 
    try { 
      ctx = new InitialContext(); 
      DataSource ds = (DataSource)ctx.lookup("JNDIPG"); 
      conn = ds.getConnection(); 
    } catch (NamingException e) { 
      // TODO Auto-generated catch block 
      e.printStackTrace(); 
    } catch (SQLException e) { 
      // TODO Auto-generated catch block 
      e.printStackTrace(); 
    } 
    return conn; 
  } 
  public static Statement createStatement(Connection conn){ 
    Statement st = null; 
      try { 
        st = conn.createStatement(); 
      } catch (SQLException e) { 
        e.printStackTrace(); 
      } 
    return st; 
  } 
}

[JSP] AJAX 自学练习无刷新提交并修改数据库数据并显示

相关帖子

MySQL数据库如何给表设置约束详解

MySQL Server 层和存储引擎层是怎么交互数据的？

2min速览：从设计、实现和优化角度浅谈Alluxio元数据同步

MySQL由浅入深掌握连接查询

Mysql8导入数据到Mysql5.7的实现步骤

MySQL数据库触发器从小白到精通

一篇带给你MySQL索引知识详解

Windows系统怎么才能和苹果系统相连进行数据互通？

SQLite 基本命令使用方式

湛蓝之海 LV3

[JSP] AJAX 自学练习 无刷新提交并修改数据库数据并显示