如何使用angularjs或jquery将每个点击的按钮操作保存在json文件/对象中

How to save each and every clicked button action in json file/object using angularjs or jquery?

本文关键字：存在 保存 操作 按钮 json 文件 对象 angularjs 何使用 jquery      更新时间：2023-09-26

我想使用angularjs或jquery将每个按钮操作（对于点击和未点击的ng，包括文件上传/urls，即无论我点击什么，该按钮都应该存储在json文件/对象中，即对于我的所有<input type="button">？我该怎么做？创建Fiddle，请帮助我。提前感谢。

html:

您可以使用添加全局beforeSend处理程序

$.ajaxSetup({
  beforeSend: function(jqXHR, settings) {
    var data = {
       url: settings.url,
       data: settings.data
    };
    $.ajax({url: 'save_json.php', data: data, beforeSend: $.noop);
  }
});

这只适用于ajax请求，如果你想记录表单提交，你需要添加全局提交处理程序：

$('body').on('submit', 'form', function(e) {
  var $target = $(e.target);
  $.ajax({
    url: 'save_json.php',
    data: {url: $target.attr('action')},
    beforeSend: $.noop, 
    sucess: function() {
      $target.submit(function(e) {
        // prevent global handler
        e.stopPropagation();
      }).submit();
    }
  });
  return false;
});

在表单元素上设置click监听器。

$('#formid').click(function (e) {
    //e.target will give the element clicked inside the form
});

检查e.target是否是按钮元素，并将按钮保存在json文件/对象中。

我认为实现这一点的最有角度的方法是创建一个指令，并使用该指令而不是<input type="button">。我创建了一个示例；

var actionLogs = [];
yourModule.directive("actionButton", [function () {
return {
    scope: {
        action: '&',
        type: '@'
    },
    restrict: 'E',
    replace: true,
    transclude: true,
    controller: function ($scope, $element) {
        var logClickEvent = function ($event) {
            var log = {element: $element, action: $scope.action, clickTime: new Date()};
            actionLogs.push(log);
        };
        $scope.doAction = function ($event) {
            //** Do whatever you want here before every action
            logClickEvent($event);
            $scope.action.apply(null, []);
        };
    },
    link: function (scope, element, attrs) {
        if (typeof attrs.type === "undefined") {
            scope.type = "button";
        }
    },
    template: '<input type="{{type}}" ng-click="doAction($event)"><span ng-transclude></span></input>'
};
}]);

您可以使用<action-button action="yourNgClickFunc()">而不是<input type="button" ng-click="yourNgClickFunc()">，您的单击将记录在阵列actionLogs中。

在某些情况下，您可能希望记录除<input type="button"> s之外的单击事件。例如，我更喜欢使用属性指令而不是元素指令；

var actionLogs  = [];
yourModule.directive("loggable", [function () {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        element.click(function (e) {
            var action = scope[attrs.ngClick.split("(")[0]];
            var log = {element: element, action: action, clickTime: new Date()};
            actionLogs.push(log);
        });
    }
};
}]);

您可以使用<input type="button" ng-click="yourNgClickFunc()" loggable>而不是<action-button>，并且您的单击仍将记录在阵列actionLogs 中

相关文章：