如何正确提交AJAX到数据库

目的：允许用户更新客户端的表格，然后更新数据库，一旦他们按下新的更改进入并在客户端显示新的更改。如何正确提交AJAX到数据库

状态：目前我能够显示表格，通过id和value使用可变jeditable和POST值到我的服务器端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>

表图像：

Editable Table

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>

来源

2013-03-03 Rhys

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

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>

上面传递的参数到JSP页面，该页面的GET的paramters。

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

由于它使用TR条作为一行，所以该行被关闭1。所以用下面的方法来分类。

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

然后通过使用JSP脚本（不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();

来源

2013-03-03 17:58:53 Rhys

您可以使用以下概念：

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

JSON对象，构成将数据发送到AJAX
jQuery的AJAX呼叫到应用服务器
使用JSON库将JSON字符串转换为Java对象，然后执行事务。

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

的Java Class：

class OneDBRow { 
     String col1Value; 
     String col2Value; 
    }

相应的对象

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

2的JSON阵列）使用构建JSON对象javascript方面（使用JQuery）

3）填充使用jQuery选择对象

4）发送对象的数据 - 部分必须使用JSON库

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

来源

2013-03-03 03:10:42 user1428716

我不知道究竟是什么jedittable提交给服务器，但如果所用的ID是id和value然后用多行的表，你可能有相同的参数名称的多个值，所以我会用getParameterValues将其全部检索为String[]。 id和value的两个阵列应具有相同的长度。

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

这样可以例如使用UUID

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

女巫中产生的ID产生类似

76c824f7-3016-4a15-a10f-a60435dc966f

而在GET请求生成HTML你必须生成每个名称cell使用形式为<uuid>_<column_name>的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>

并有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。分割逗号分隔值后，您可以更新相应记录的每一列。

来源

2013-03-03 03:13:14 A4L

谢谢JDBC连接，那是什么我脑子里想的，因为我需要三个引用为目标的右行/列。我希望在默认情况下有更多的var从'jeditable'像row_id或列名称。你有任何可玩的经验吗？ – Rhys 2013-03-03 03:24:08

不幸的是：/ ...我的答案如何开始;-) – A4L 2013-03-03 03:28:38

你可以使用'getParameterMap'来查看所有提交的数据，也许（希望）你会认识到什么。 javadoc - > http://docs.oracle.com/javaee/6/api/javax/servlet/ServletRequest.html#getParameterMap%28%29 – A4L 2013-03-03 03:37:41

如何正确提交AJAX到数据库

回答

相关问题