捕获页面标题,控制标签的通用方式

时间:2013-06-08 16:44:34

标签: java javascript jsp web-applications javascript-events

我们的一位客户有一项新要求,即动态捕捉页面/屏幕标题以及页面上所有控件(文本框,复选框,单选按钮,普通按钮,链接,图像,菜单/菜单项)的标签。用户与之交互,然后将其推送到excel文件。

如果客户导航/打开页面A并在文本框中设置值Name = John,启用checkboxChBox /单选按钮Rbutton然后最后单击“保存/提交”按钮,则需要以下输出。用户操作和结果是excel文件的前2列。

     **User Action**                               **Result**

      Open Page/Screen A                            Page/Screen A is displayed
      Set textbox Name = John                       Field Name is set successfully
      Set  ChBox = true                             ChBox is enabled successfully
      Set Rbutton = true                            Rbutton is enabled successfully
      Click Submit button                           Page B is displayed

只是想知道是否有可能实现这一点以及捕获任何页面的用户交互的通用方法。

2 个答案:

答案 0 :(得分:0)

只是一个想法:您可以监听所有事件(例如,使用jquery),然后为每个'有趣'事件发布ajax请求(您必须过滤...),将其存储在数据库中,然后以csv或excel格式添加“导出”功能。

可能是一些性能问题,这取决于页面,事件和用户的数量......

使用类名过滤的想法很好,感谢Hasan Iqbal Anik。

答案 1 :(得分:0)

Javascript无权访问硬盘中的文件。但是,您可以捕获数据,创建模型,然后使用ajax调用将其存储在服务器中。

一些想法:

  1. 使用在整个应用程序视图中呈现的布局或母版页。
  2. 为所有页面标签,按钮,复选框以及存储信息所需的任何内容提供相同的类名称。
  3. 在主/布局页面中使用一些jquery magic来获取这些元素的值并创建一个数组。
  4. 通过ajax调用将该数组发送到服务器。
  5. 现在,您可以获得大量有关如何使用jquery获取元素值的示例。我拯救你不要放弃所有这些。希望有助于...:D

    //编辑:我正按照史蒂夫的要求扩展我的答案。

    <form action="someAction" id="myForm">
    Name: <input type="text" class="Name">
    Checkbox: <input type="checkbox" class="ChBox"/>Click this box
    RButton: <input class="Rbutton" type="radio" />
    Submit: <input type="submit" class="submit"/>
    </form>
    

    现在有些jquery:

    $(function() {
         $(".submit").click(function(){
    var dataToSend = new Object();
    dataToSend.pageUrl = window.location.pathname + " is displayed";
    if ($(".Name").val().length > 0) {
    dataToSend.Name = "Field Name is set successfully";
    }
    else {
    dataToSend.Name = "Field Name is empty";
    }
    if($(".ChBox").is(':checked')){dataToSend.ChBox = "ChBox is enabled successfully";}
    else{dataToSend.ChBox = "ChBox is not enabled";}
    if($(".Rbutton").is(':checked')){dataToSend.Rbutton = "Rbutton is enabled successfully";}
    else{dataToSend.Rbutton = "Rbutton is not checked";}
    dataToSend.Submit = $("#myForm").attr['action'] + " is displayed";
    });
    
    
    //now send it to the server via ajax
    
    $.ajax({
     type: "POST",
     url: "your server action url that would make excel file with these data",
     data: dataToSend,
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function(msg) {
    //do as you wish
     }
    });
    
        });