首页 新闻 论坛 群组 Blog 文档 下载 读书 Tag 网摘 搜索 .NET Java 游戏 视频 人才 外包 培训 数据库 书店 程序员
中国软件网
欢迎您:游客 | 登录 注册 帮助
    • 高手帮忙解决,jsp中onclick调用js保存当前table中的所有数据 [无满意答案结贴]
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-05-21 17:46:27 楼主
    具体情况:在jsp中有多个table,table中有许多输入框,当我随便点击一个输入框然后点击其他地方,就会保存当前输入框的所在table中的所有值,比如 <input> <textarea>等中的值都会一次性保存到request中,然后我再次点击以前点过的table会被重新保存,覆盖到以前的值,大概就是这样的.

    哪个大哥帮忙解决下,谢谢~_~!!!
    100  修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-05-21 18:50:351楼 得分:0
    当鼠标的光标失去的时候 触发一个事件  这个事件中可以处理很多事情了 比如保存到数据库中去 或者保存在js 写入到当前页面的一个域
    不过我还是不很清楚你要什么功能 所以没办法帮你写代码
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-05-21 19:36:562楼 得分:0
    给搂主写了个简单的例子，楼主看看
    HTML code
    
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>InputTest</title>
<style type="text/css">

.txtStyle
{
    width: 100px;
    border:    #000000 1px solid;
}

</style>

<script type="text/javascript">
    function inputOnblur() {
        var txt11Vale = document.getElementById("txtID11").value;
        var txt12Vale = document.getElementById("txtID12").value;
        var txt21Vale = document.getElementById("txtID21").value;
        var txt22Vale = document.getElementById("txtID22").value;
        var txt31Vale = document.getElementById("txtID31").value;
        var txt32Vale = document.getElementById("txtID32").value;
        //alert(txt11Vale);
        setData(txt11Vale,txt12Vale,txt21Vale,txt22Vale,txt31Vale,txt32Vale);
    }
    
    function setData(value1,value2,value3,value4,value5,value6) {
        url="SaveServlet";    
        var post="value1="+value1+"&value2="+value2+"&value3="+value3+"&value4="+value4+"&value5="+value5+"&value6="+value6;
        
        if(window.ActiveXObject){
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }else if(window.ActiveXObject){
            request = new ActiveXObject("Msxml2.XMLHTTP.4.0");
        }else if(window.ActiveXObject){
            request = new ActiveXObject("Msxml2.XMLHTTP");
        }else if(window.XMLHttpRequest){
               request = new XMLHttpRequest();
        }    
        if (!request){
            alert("error");
        }
        request.open("POST", url, true);
        request.setRequestHeader("content-length",post.length); 
        request.setRequestHeader("content-type","application/x-www-form-urlencoded;");
        request.onreadystatechange = returnAjaxMethod;
        request.send(post);
    }
    
    function returnAjaxMethod() {
        if (request.readyState == 4) {
            if (request.status == 200) {
                var response = request.responseText;
            }
            else{
                alert("status is " + request.status);
            }
        }    
    }
    
</script>
</head>
<body>
<form action="">
<table>
    <tr>
        <td><input type="text" id="txtID11" name="txt11" class="txtStyle" onblur="inputOnblur()"/></td>
        <td><input type="text" id="txtID12" name="txt12" class="txtStyle" onblur="inputOnblur()"/></td>
    </tr>
    <tr>
        <td><input type="text" id="txtID21" name="txt21" class="txtStyle" onblur="inputOnblur()"/></td>
        <td><input type="text" id="txtID22" name="txt22" class="txtStyle" onblur="inputOnblur()"/></td>
    </tr>
    <tr>
        <td><input type="text" id="txtID31" name="txt31" class="txtStyle" onblur="inputOnblur()"/></td>
        <td><input type="text" id="txtID32" name="txt32" class="txtStyle" onblur="inputOnblur()"/></td>
    </tr>
</table>
</form>
</body>
</html>


    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-05-21 19:38:103楼 得分:0
    web.xml

    XML code
    
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <servlet>
          <description></description>
          <display-name>SaveServlet</display-name>
          <servlet-name>SaveServlet</servlet-name>
          <servlet-class>ajaxtest.SaveServlet</servlet-class>
    </servlet>
    <servlet-mapping>
          <servlet-name>SaveServlet</servlet-name>
          <url-pattern>/SaveServlet</url-pattern>
      </servlet-mapping>
</web-app>
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-05-21 19:39:244楼 得分:0
    servlet代码

    Java code
    
package ajaxtest;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class for Servlet: SaveServlet
 *
 */
 public class SaveServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {

    public SaveServlet() {
        super();
    }       
    

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }      

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String value1 = request.getParameter("value1");
        String value2 = request.getParameter("value2");
        String value3 = request.getParameter("value3");
        String value4 = request.getParameter("value4");
        String value5 = request.getParameter("value5");
        String value6 = request.getParameter("value6");
        System.out.println("value1="+value1+",value2="+value2+",value3="+value3+",value4="+value4+",value5"+value5+",value6:"+value6);
    }                 
}
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • java2000_net
    • 等级:
    发表于：2008-05-21 19:41:375楼 得分:0
    <form id="MAINFORM">
    <table>
      ..... 你的所有的东西
    </table>
    </form>

    使用prototype
    function saveForm(){
      new Ajax.Request("save.do",{
        method:"POST",
        parameters: $("MAINFORM").serialize()
      }
    });
    }

    你的 onclick 直接调用这个就行了，建议还是用 onchange 方法吧，呵呵！
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • java2000_net
    • 等级:
    发表于：2008-05-21 19:42:306楼 得分:0
    后台的save.do 之类的就不写了，你自己弄吧！
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-05-21 19:45:287楼 得分:0
    简单的说一下过程：
        通过input的onblur方法 用ajax调用servlet；然后用request.getParameter("value1");接收传过来的值

    现在的效果是：每次input失去焦点后，就会把table中的所有input的值传给servlet，然后可以用request.getParameter("value1")接收
    接到后搂主想怎么处理就看你想干什么了  赫赫

    楼主 看一下吧，看看是不是你想要得效果
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-05-21 19:49:008楼 得分:0
    老紫竹也来了阿  哈哈！！！
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-05-22 13:46:579楼 得分:0
    小弟真的十分感谢各位的热心帮助，我和仔细的看了各位的答复，2楼的朋友我的我的目标是想保存到request中，也许没看到吧；老紫竹高手说的我不是很理解serialize()的意思，我想这是把form中的全部提交上去了吧，我的目标是想分布不保存，当然使用onchange（）方法，输入值没变没必要重新保存了；最后十分感谢阿布美女的帮忙，代码写的详细到家了，我看了很长时间，我现在刚开始学ajax，基本上理解了什么意思，但是我想做的更加通用些，下面是我的需求：
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-05-22 13:49:3510楼 得分:0
    <form action="">
    <table id=“table1”>
        <tr>
        <td> <input type="text" id="txtID11" name="txt11" class="txtStyle" onchange="inputOnblur()"/> </td>
        <tr>
            <td> <input type="text" id="txtID13" name="txt13" class="txtStyle" onchange ="inputOnblur()"/> </td>
            <td> <input type="text" id="txtID14" name="txt14" class="txtStyle" onchange ="inputOnblur()"/> </td>
        </tr>
       
    </table>

    <table id="table2">
        <tr>
            <td> <input type="text" id="txtID21" name="txt11" class="txtStyle" onchange ="inputOnblur()"/> </td>
            <td> <input type="text" id="txtID22" name="txt12" class="txtStyle" onchange ="inputOnblur()"/> </td>
        </tr>
        <tr>
            <td> <input type="text" id="txtID23" name="txt133" class="txtStyle" onchange ="inputOnblur()"/> </td>
            <td> <input type="text" id="txtID24" name="txt144" class="txtStyle" onchange ="inputOnblur()"/> </td>
        </tr>
       
    </table id="table3">

    <table>
        <tr>
            <td> <input type="text" id="txtID31" name="txt11" class="txtStyle" onchange ="inputOnblur()"/> </td>
            <td> <input type="text" id="txtID32" name="txt12" class="txtStyle" onchange ="inputOnblur()"/> </td>
        </tr>
        <tr>
            <td> <input type="text" id="txtID33" name="txt13" class="txtStyle" onchange ="inputOnblur()"/> </td>
            <td> <input type="text" id="txtID34" name="txt1444" class="txtStyle" onchange ="inputOnblur()"/> </td>
        </tr>
       
    </table>

    </form>
    业务大致是这样，其中table数量不定，其中name的命名可以定义一种规则，由js完全动态读取，然后保存到request中。大致就是这样了，请各位朋友指点下。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • skyqiang
    • 等级:
    发表于：2008-05-22 13:52:4911楼 得分:0
    引用 4 楼 lblxiaoyu 的回复:
    servlet代码


    Java code
    package ajaxtest;

    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;

    /**
    * Servlet implementation class for Servlet: SaveServlet
    *
    */
    public class SaveServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {

        pub…
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • shuai45
    • 等级:
    发表于：2008-05-22 13:58:1512楼 得分:0
    js＋xml　或用　dwr
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-05-22 14:03:0813楼 得分:0
    “2楼的朋友我的我的目标是想保存到request中，也许没看到吧；”这个是在说我吗？

    楼主现在就是要把那个向后台传参的地方写的通用一点是不？
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-05-22 15:11:0214楼 得分:0
    楼主看看这个吧

    HTML code
    
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>InputTest</title>
<script src="prototype1.6.0_rc1.js" type="text/javascript"></script>
<style type="text/css">

.txtStyle
{
    width: 100px;
    border:    #000000 1px solid;
}

</style>

<script type="text/javascript">
    function inputOnblur(formName) {
    var params = Form.serialize(formName);
    var tempArr = params.split("&");
    var temp = "arrLength="+tempArr.length;
    var subTemp ;
    for(var i=1;i<=tempArr.length;i++) {
        subTemp = tempArr[i-1].split("=");
        temp = temp + "&value"+i+"="+subTemp[1];
    }
    setData(temp);
    }
    
    function setData(params) {
        url="SaveServlet";
        var post=params;
        
        if(window.ActiveXObject){
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }else if(window.ActiveXObject){
            request = new ActiveXObject("Msxml2.XMLHTTP.4.0");
        }else if(window.ActiveXObject){
            request = new ActiveXObject("Msxml2.XMLHTTP");
        }else if(window.XMLHttpRequest){
               request = new XMLHttpRequest();
        }    
        if (!request){
            alert("error");
        }
        request.open("POST", url, true);
        request.setRequestHeader("content-length",post.length); 
        request.setRequestHeader("content-type","application/x-www-form-urlencoded;");
        request.onreadystatechange = returnAjaxMethod;
        request.send(post);
    }
    
    function returnAjaxMethod() {
        if (request.readyState == 4) {
            if (request.status == 200) {
                //var response = request.responseText;
                alert("ok");
            }
            else{
                alert("status is " + request.status);
            }
        }    
    }
    
</script>
</head>
<body>
<form name="form1">
<table>
    <tr>
        <td><input type="text" id="txtID11" name="txt11" class="txtStyle" onChange="inputOnblur('form1')"/></td>
        <td><input type="text" id="txtID12" name="txt12" class="txtStyle" onChange="inputOnblur('form1')"/></td>
    </tr>
    <tr>
        <td><input type="text" id="txtID21" name="txt21" class="txtStyle" onChange="inputOnblur('form1')"/></td>
        <td><input type="text" id="txtID22" name="txt22" class="txtStyle" onChange="inputOnblur('form1')"/></td>
    </tr>
    <tr>
        <td><input type="text" id="txtID31" name="txt31" class="txtStyle" onChange="inputOnblur('form1')"/></td>
        <td><input type="text" id="txtID32" name="txt32" class="txtStyle" onChange="inputOnblur('form1')"/></td>    </tr>
</table>
</form>

<form name="form2">
<table>
    <tr>
        <td><input type="text" id="txt2ID11" name="txt11" class="txtStyle" onChange="inputOnblur('form2')"/></td>
        <td><input type="text" id="txt2ID12" name="txt12" class="txtStyle" onChange="inputOnblur('form2')"/></td>
    </tr>
    <tr>
        <td><input type="text" id="txt2ID21" name="txt21" class="txtStyle" onChange="inputOnblur('form2')"/></td>
        <td><input type="text" id="txt2ID22" name="txt22" class="txtStyle" onChange="inputOnblur('form2')"/></td>
    </tr>
</table>
</form>

</body>
</html>
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天