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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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" "http://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; 
    } 
}