论坛首页 Web前端技术论坛

用XMLHTTP配合来实现前台动态表单的生成,并传输到后台,可

浏览 15004 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2005-06-16  
摆渡人 写道

我做了一个demo.但用数据库有个问题。没办法判断是那种类型的表单.
这个变成在数据库里要多存,是input ,select,还是其它的东东。。

有没有更好的解决类型问题。不然的话。前台导入只能用XML先显示。

我的方法如下:
先从数据库里取出值.这时,在类型上怎么解决更好呢。
<form name="myform2" id="myform"  method="post" action="">
   <%
       while(it.hasNext()){
              inputBean rs = (inputBean)it.next();
  %>
<%=rs.getTitle()%>:<input name="<%=rs.getName()%>" type="<%=rs.getType()%>" value="" onchange="setValue(this.name,this.value)"><br>
<%
  }
%>
</form>
然后。。其实在点击时,在脚本上已经触发脚本onchange="setValue来存值。格式是XML的。然后用xmlhttp的send();发送到java.
其XML格式是
<?xml version="1.0" encoding="utf-8"?>
<data type="form">
<v n="' + str1 + '" v="' + str2 + '" />
<v n="' + str1 + '" v="' + str2 + '" />
......................其中n是字段的名称,v 为字段的值传到后。但首先n这个东东
在与后台定义上总觉得不怎么好。(估计要与数据库的字段名一一对应,才有办法存值)????
</data>

这种方式如何。。。。。。。。


我以前采用的一种方式,供你参考:

1. 数据部分用db2xml(www.informatik.fh-wiesbaden.de/~turau/DB2XML)将数据库中的数据用xml形式导出,db2xml执行sql语句(该语句可以是多个访问不同数据表的sql语句组合),  导出形式如:
<dataset>
    <table0>
        <record0>
            <column1>value1</column1>
            <column2>value2</column2>
            ........
        </record0>
     </table0>
     <table1>
      .........
     </table1>
</dataset>
这一部分也可以结合sqlmap实现。

2. 表单部分你可以为<input>等控件自定义一个attribute,或者直接利用id/name attribute来保存与数据库表的映射关系, 比如:
<input type="text" name="xxx" model="table/column">
这里你可以直接使用数据库的表和字段直接对应,也可以用数据库视图或者自定义的映射关系来避免暴露数据库设计。

3. 利用xmlhttp得到xml数据,在window.onload方法中遍历form的element,根据model的定义,利用xpath得到值,代码简单如下:
for (var i = 0; i < form.elements.length; i++); {
    var ele = form.elements[i];
    if (ele.type == "input" || ele.type=="hidden"); {
        ele.value = ele.defaultValue = xmldata.selectSingleNode("///" + ele.getAttribute("model"); );.text;
    }
    //handle radio, checkbox , select-one .....
}


4. 数据的更新要复杂的多,首先要通过value 与 defaultValue的对比判断值是否改变(根据需求,无论数据是否改变也更新也不会出错),然后同样利用model attribute ,组合成需要更新的xml,格式可以如下:
<dataset>
    <update table="table0">
        <where>
            <pk>xxxx</pk>
        </where>
        <column>value</column>
        ..............
</dataset>
通过xmlhttp 提交,通过一个自定义的 servlet 或者 action 来 parse 数据,并替换为sql语句执行。这一部分同样可以考虑sqlmap。

通过这样的设计,对用户来说避免了很多页面的刷新,效果还将就,但是需要解决的问题还有很多,包括数据校验,select-multiple的控制,复杂的页面控件(combobox|grid),缓存,错误调试等等。

建议就是,不要过于追求灵活。
0 请登录后投票
   发表时间:2005-06-17  
醒来 写道


我以前采用的一种方式,供你参考:

1. 数据部分用db2xml(www.informatik.fh-wiesbaden.de/~turau/DB2XML)将数据库中的数据用xml形式导出,db2xml执行sql语句(该语句可以是多个访问不同数据表的sql语句组合),  导出形式如:
<dataset>
    <table0>
        <record0>
            <column1>value1</column1>
            <column2>value2</column2>
            ........
        </record0>
     </table0>
     <table1>
      .........
     </table1>
</dataset>
这一部分也可以结合sqlmap实现。

2. 表单部分你可以为<input>等控件自定义一个attribute,或者直接利用id/name attribute来保存与数据库表的映射关系, 比如:
<input type="text" name="xxx" model="table/column">
这里你可以直接使用数据库的表和字段直接对应,也可以用数据库视图或者自定义的映射关系来避免暴露数据库设计。

3. 利用xmlhttp得到xml数据,在window.onload方法中遍历form的element,根据model的定义,利用xpath得到值,代码简单如下:
for (var i = 0; i < form.elements.length; i++); {
    var ele = form.elements[i];
    if (ele.type == "input" || ele.type=="hidden"); {
        ele.value = ele.defaultValue = xmldata.selectSingleNode("///" + ele.getAttribute("model"); );.text;
    }
    //handle radio, checkbox , select-one .....
}


4. 数据的更新要复杂的多,首先要通过value 与 defaultValue的对比判断值是否改变(根据需求,无论数据是否改变也更新也不会出错),然后同样利用model attribute ,组合成需要更新的xml,格式可以如下:
<dataset>
    <update table="table0">
        <where>
            <pk>xxxx</pk>
        </where>
        <column>value</column>
        ..............
</dataset>
通过xmlhttp 提交,通过一个自定义的 servlet 或者 action 来 parse 数据,并替换为sql语句执行。这一部分同样可以考虑sqlmap。

通过这样的设计,对用户来说避免了很多页面的刷新,效果还将就,但是需要解决的问题还有很多,包括数据校验,select-multiple的控制,复杂的页面控件(combobox|grid),缓存,错误调试等等。

建议就是,不要过于追求灵活。


你的方法不错。我现在是用oracle9i。但还不会用他的XML的功能,如果会用相信会更好些。

不过你上面所说了没有具体到怎么样生成表单,我现在是觉得生成表单的问题很大。如果遇到单选框,多选框。这样就不好处理了。
0 请登录后投票
   发表时间:2005-06-17  
to 摆渡人:
刚开始只是一个很简单的需求,通过 XMLHTTP 提交一张特定表单的数据。到后来实际上已经变成了一个非常复杂的需求了。就是如何把显示在页面上的表单数据与关系数据库中的数据建立起映射关系,实现自动的增删改查,这个目标其实已经可以作为一个单独的项目了,包括前台后台大量的代码。需要解决的复杂问题包括:
1、根据表单的定义(这个定义可以保存在后台的 XML 中)自动生成查询的 SQL,从数据库取得数据后通过 XMLHTTP 传给前台,自动显示在页面中。
2、对于表单数据变更的跟踪,变更包括增删改三种,通过 XMLHTTP 提交数据给后台,后台经过某种处理,最终自动生成对应的 SQL。
3、有些表单的数据不会很简单地来自于一张表,可能会来自多张表,这些表之间的关系一般是一对多的父子关系,并且可能嵌套多层。如何自动生成对于多张表的查询,如何跟踪对于多张表数据的修改。
4、数据的增删改查都需要保证其安全性,要验证每一个客户端发来的请求的合法性,杜绝出现身份伪装的情况。
5、为了提高性能,需要实现表单数据的分页。分页有两种方式,前台分页和后台分页。因为浏览器对于大量数据的处理能力有限,所以建议采用后台分页的方式。后台分页的实现也有两种方式,或者将全部数据取出后缓存在后台,或者到前台发来不同页面的请求时才生成查询的 SQL。
6、为了提高可用性,还应该支持直接在表单上面执行修改新增等功能,使得这个表单支持类似于 Excel 电子表的操作方式(没错,就是使用 HTML+JS 模拟 Excel 的操作方式)。
7、表单数据的排序、选择、过滤、格式验证等等功能。
8、... n 多其它的细节。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics