侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 4年前   360

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;
    }
}


  • 上一条:
    Smarty结合Ajax实现无刷新留言本实例
    下一条:
    AJAX 自学练习 请求与显示
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客