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

这是我想做的事情：


选择颜色
显示值
以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);
                }
            });
        });
    });
}

最佳答案

您可以将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);
                                         }
            });
        });
    });
});