使用 AJAX 将色谱数据提交到 PHP 后端

Question

这是我正在尝试做的事情：

1. 选择颜色
2. 显示值
3. 显示颜色 div
4. 在 submit、post 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);
                }
            });
        });
    });
}

Answer 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);
                                         }
            });
        });
    });
});

Answer 2

我认为，对于您的 post 处理，使用 app.factory.The 在控制器中使用返回的数据。因此 jQuery（函数 () 将是 unnecessary.Review 下面的代码示例。

 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);
            })
           }
        ]);