Java 如何正确地将AJAX提交给DB_Java_Javascript_Jquery_Jsp_Jeditable

Java 如何正确地将AJAX提交给DB

java javascript jquery jsp

Java 如何正确地将AJAX提交给DB,java,javascript,jquery,jsp,jeditable,Java,Javascript,Jquery,Jsp,Jeditable,目标：允许用户在客户端更新表，然后在按enter键并在客户端显示新更改后更新数据库状态：目前我可以显示表，使用jeditable编辑表，并通过id和value变量将值发布到我的server-side out.jsp页面，然后使用request.getParamater接收var并显示回客户端。我还使用JDBC和SQLITE动态生成这些表，并希望使用相同的过程插入或替换新值问题：如何传递有关行/列信息的更多信息，以便使用这些新值正确更新数据库问题2：有办法通过整排吗？如果是这样的话，我可以简

目标：允许用户在客户端更新表，然后在按enter键并在客户端显示新更改后更新数据库

状态：目前我可以显示表，使用jeditable编辑表，并通过

id

和

value

变量将值发布到我的server-side out.jsp页面，然后使用

request.getParamater

接收var并显示回客户端。我还使用JDBC和SQLITE动态生成这些表，并希望使用相同的过程插入或替换新值

问题：如何传递有关行/列信息的更多信息，以便使用这些新值正确更新数据库

问题2：有办法通过整排吗？如果是这样的话，我可以简单地将所有值插入或替换回表中

当前代码：

JSP客户端：Client.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=ISO-8859-1">
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
    type="text/javascript" charset="utf-8"></script>
<script src="js/jedit.js" type="text/javascript" charset="utf-8"></script>
<title>Jeditable Test</title>

<script type="text/javascript">
$(document).ready(function() {
    $('.edit').editable('out.jsp', {
        indicator : 'Saving...',
        tooltip   : 'Click to edit...'
    });
});


</script>
</head>
<body>
    <div class="content">
        <table id="demotable1"
            style="border: 1px solid #ccc; margin: 50px auto;">
            <thead style="border: 1px solid #ccc;">
                <tr>
                    <th filter-type='ddl' style="border: 1px solid #ccc;">ONE</th>
                    <th filter-type='ddl' style="border: 1px solid #ccc;">TWO</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class='edit' in="ONE" style='border: 1px solid #ccc;'>Value 1</td>
                    <td class='edit' id="TWO" style='border: 1px solid #ccc;'>Value 2</td>

                </tr>
                <tr>
                    <td class='edit' id="ONE" style='border: 1px solid #ccc;'>Value 3</td>
                    <td class='edit' id="TWO" style='border: 1px solid #ccc;'>Value 4</td>
                </tr>

            </tbody>
        </table>

    </div>
</body>
</html>


绝地试验
$（文档）.ready（函数（）{
$（'.edit'）.editable（'out.jsp'）{
指标：“正在保存…”，
工具提示：“单击以编辑…”
});
});
一个
两个
值1
价值2
价值3
价值4

表格图像：

JSP-out.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>

                <% 
                String id = request.getParameter("id");
                String value = request.getParameter("value");

                %>
</head>
<body>
<%=id%>
<%=value%>
</body>
</html>

您可以使用以下概念：

更标准的方式：使用JSON对象交换数据

用于将数据发送到AJAX的JSON对象

jQuery AJAX用于调用应用程序服务器

使用JSON库将JSON字符串转换为Java对象，然后执行事务

1）定义JSON对象的数据结构：

Java类：

 class OneDBRow {
      String col1Value;
      String col2Value;
  }

对象的对应JSON数组

  {
      {type:"OneDBRow", col1Value: "hello", col2Value: "Value 2"},
      {type:"OneDBRow", col1Value: "Value 3", col2Value: "Value 4"}
  }

2）使用javascript端构造JSON对象（使用JQuery）

3）使用jQuery选择器填充对象

4）将对象作为数据的一部分发送-必须使用JSON库构造对象

我不知道创建对象数组的确切语法，您可能需要自己研究。

我不知道

jedittable

提交给服务器的确切内容，但是如果使用的id是

id

和

value

，那么对于具有多行的表，同一参数名可能有多个值，因此，我将使用

String[]

来检索它们。

id

和

value

的两个数组应具有相同的长度

为了能够识别每一行，您必须为保存在数据库中的每个记录/行提供某种唯一的id

例如，可以使用

女巫产生了类似的东西

76c824f7-3016-4a15-a10f-a60435dc966f

在GET请求生成HTML时，您必须以

的形式使用uid为每个单元格生成一个名称，例如uid

76c824f7-3016-4a15-a10f-a60435dc966f

和

ONE

和

TWO

的记录

<td name="76c824f7-3016-4a15-a10f-a60435dc966f_ONE" ...>value 1</td>
<td name="76c824f7-3016-4a15-a10f-a60435dc966f_TWO" ...>value 2</td>

等等

发布后，您必须加载所有记录，生成名称并用于检索每个列值并进行更新

你必须考虑新的记录女巫你必须插入到数据库中。

如果要将整行作为单个参数发送到服务器，则必须在浏览器上使用javascript进行处理。例如，您可以生成如下内容

'76c824f7-3016-4a15-a10f-a60435dc966f=value 1,value 2'
'1a8c2aad-a438-4263-972b-30a839421e6d=value 3,value 4'

参数名将是uid。拆分逗号分隔的值后，您可以更新相应记录的每一列。

我找到了解决方案，并认为如果有人感兴趣，我应该发布

JQUERY：

<script>
$(document).ready(function() {
    /* Init DataTables */
    var oTable = $('#resource-table').dataTable();

    /* Apply the jEditable handlers to the table */
    $('td', oTable.fnGetNodes()).editable( 'out.jsp', {
        "callback": function( sValue, y ) {
            var aPos = oTable.fnGetPosition( this );
            oTable.fnUpdate( sValue, aPos[0], aPos[1] );
        },
        "submitdata": function ( value, settings ) {
            return {
                "row_id": this.parentNode.getAttribute('id'),
                "id": this.getAttribute('id'),
                "colName": this.getAttribute('col'),
                "column": oTable.fnGetPosition( this )[2]
            };
        },
        "height": "14px"
    } );
} );   

</script>

当该行使用TR栏作为一行时，该行被关闭1。所以用下面的方法来解决这个问题

int rowId = Integer.parseInt(row);
        rowId += 1;

然后通过JSP脚本使用JDBC连接（不是MVC..我知道）

谢谢，这就是我的想法，因为我需要三个引用来定位正确的行/列。我希望表中有更多的变量，比如默认的行id或列名。你有绝地表方面的经验吗？不幸的是没有：/。。。我的答案是这样开始的；-）您可以使用

getParameterMap

查看提交的所有数据，也许（希望）您会识别出一些东西。javadoc->

<script>
$(document).ready(function() {
    /* Init DataTables */
    var oTable = $('#resource-table').dataTable();

    /* Apply the jEditable handlers to the table */
    $('td', oTable.fnGetNodes()).editable( 'out.jsp', {
        "callback": function( sValue, y ) {
            var aPos = oTable.fnGetPosition( this );
            oTable.fnUpdate( sValue, aPos[0], aPos[1] );
        },
        "submitdata": function ( value, settings ) {
            return {
                "row_id": this.parentNode.getAttribute('id'),
                "id": this.getAttribute('id'),
                "colName": this.getAttribute('col'),
                "column": oTable.fnGetPosition( this )[2]
            };
        },
        "height": "14px"
    } );
} );   

</script>

String colName = request.getParameter("colName");
String value = request.getParameter("value");
String row = request.getParameter("row_id");
String column = request.getParameter("column");

int rowId = Integer.parseInt(row);
        rowId += 1;

Class.forName("org.sqlite.JDBC");
        conn = DriverManager.getConnection("jdbc:sqlite:/db.sqlite");
        Statement stat = conn.createStatement();
        add_time = conn.prepareStatement("UPDATE table SET "+colName+" ='"+value+"' WHERE rowid = "+rowId+";");
        add_time.executeUpdate();