java - 如何正确提交 AJAX 到 DB

Question

目的：允许用户在客户端更新表，然后在他们按下回车键后更新数据库，并在客户端显示新的更改。

状态：目前我能够显示表格，使用 jeditable 编辑表格，POST并将值通过id和value变量发送到我的服务器端 out.jsp 页面，然后用于request.getParamater接收 var 并显示回客户端。我还使用带有 SQLITE 的 JDBC 来动态生成这些表，并希望使用相同的过程来插入或替换新值。

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

问题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>

表格图片：

可编辑表

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>

score 1 · Accepted Answer

我不知道究竟jedittable向服务器提交了什么，但如果使用的 id 是id然后value对于具有多行的表，您可能有多个相同参数名称的值，所以我将使用getParameterValues将它们全部检索为String[]. 和的两个数组都id应该value具有相同的长度。

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

例如，可以使用UUID生成这样的 id

String uid = UUID.randomUUID().toString();

女巫产生类似的东西

76c824f7-3016-4a15-a10f-a60435dc966f

在根据 GET 请求生成 HTML 时，您必须使用表单中的 uid 为每个单元格生成一个名称<uuid>_<column_name>，例如带有 uid76c824f7-3016-4a15-a10f-a60435dc966f和 columnns的记录ONE和TWO

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

并使用 uid 记录1a8c2aad-a438-4263-972b-30a839421e6d

<td name="1a8c2aad-a438-4263-972b-30a839421e6d_ONE" ...>value 3</td>
<td name="1a8c2aad-a438-4263-972b-30a839421e6d_TWO" ...>value 4</td>

等等。

发布后，您必须加载所有记录、生成名称并使用getParameter检索每个列的值并更新它。

您必须考虑必须插入数据库的新记录。

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

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

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

score 0 · Accepted Answer

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

查询：

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

以上将参数传递给JSP Page，其中GET 是参数。

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

该行偏离 1，因为它使用 TR 条作为一行。所以用下面的方法来解决这个问题。

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

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

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();

score 0 · Accepted Answer

您可以使用以下概念：

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

构造 JSON 对象以将数据发送到 AJAX
用于调用应用程序服务器的 jQuery AJAX
使用 JSON 库将 JSON 字符串转换为 Java 对象，然后进行事务处理。

1) 定义 JSON Object 的数据结构：

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 库构建对象

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

java - 如何正确提交 AJAX 到 DB

3 回答 3

Related

Reference