使用 AJAX 向 PHP 后端提交色谱数据答案

【问题标题】：Submit color spectrum data to PHP back end using AJAX使用 AJAX 向 PHP 后端提交色谱数据
【发布时间】：2015-10-13 07:14:34
【问题描述】：

这是我想要做的：

选择颜色
显示值
div 中的显示颜色
在 submit 上，将 AJAX 发布到 PHP

我觉得我已经很接近了，只是需要额外的推动才能知道我哪里出错了。

这是JSFiddle。

我当前的 JavaScript：

app.controller('MyCtrl', function ($scope) {
    $scope.targetColor = '#ec9040';
});

angular.bootstrap(document, ['app']);

jQuery(function () {
    var field1 = $('#field1');

    $('#send').click(
        function () {
            console.log('fieldvalue: field1.val()')
            jQuery.ajax({
                type: "POST",
                url: "colormystatus.php",
                data: {
                    field1value: field1.val()
                },
                dataType: "html",
                success: function (data) {
                    alert(data);
                }
            });
        });
    });
}

【问题讨论】：

标签： javascript jquery ajax angularjs spectrumjs

【解决方案1】：

您可以将jQuery(function () {}) 移动到您的控制器中，并发送$scope.targetColor 而不是field1.val(): (updated fiddle)

app.controller('MyCtrl', function ($scope) {
    $scope.targetColor = '#ec9040';

    jQuery(function () {
        $('#send').click(function () {
            console.log('$scope.targetColor:', $scope.targetColor)
            jQuery.ajax({
                type: "POST",
                url: "https://httpbin.org/post",
                data: {
                        field1value: $scope.targetColor
                       },
                dataType: "html",
                success: function (data) {
                                        alert(data);
                                         }
            });
        });
    });
});

【讨论】：

【解决方案2】：

我认为，对于您的后处理使用 app.factory。返回的数据在控制器中使用。所以 jQuery(function () 将是不必要的。查看以下代码示例。

 app.factory('ColorFactory'),['$http',
        function ($http) {
            var colorFactory={};
            colorFactory.targetPostColor=function(field1){
                return $http({
                            type: "POST",
                            url: "colormystatus.php",
                            data: {
                                    field1value: field1.val()
                                   }
                    })
            }
            return colorFactory;
        }];

        app.controller('MyCtrl',['ColorFactory','$scope',
            function($scope,ColorFactory)
            $scope.targetColor = '#ec9040';
            ColorFactory.targetPostColor($scope.targetColor).success(function(data) { 
                         coonsole.log(data);
            })
           }
        ]);

【讨论】：