无法向 API Server Anugularjs 发送/接收发布数据

Question

有人可以帮助我吗？这已经让我绞尽脑汁很久了，我在 Google 上搜索并搜索了 Stack 的解决方案，但找不到任何可行的方法。

我对 web 开发相当陌生，但我一直更关注后端，但想尝试一点前端，所以我决定（使用在线教程）使用服务器上具有所有游戏逻辑的纸牌游戏（ruby/sinatra），它接受/发送 json 数据到客户端（angularjs）。我可以使用 rest-client 成功测试 api，但似乎无法使用 angularjs 让它工作。下面是我成功的 rest-client 数据验证和我失败的 angularjs 客户端应用程序。我只是（所以我想）希望能够在表单/文本框中输入玩家姓名并将该数据发送到服务器并让服务器响应数据作为设置，就像我在 rest-client 中所做的那样。谢谢，仅供参考，我在 sinatra 服务器端启用了 cross_origin。

这是服务器端的发布路线..

post '/join' do
return_message = {}
jdata = JSON.parse(params[:data], :symbolize_names => true)
if jdata.has_key?(:name) && cas.join_game(jdata[:name])
return_message[:status] = "Welcome #{jdata[:name]}"

Rest-Client 端代码..

class CasinoClient
attr_reader :name

def initialize name
    @name = name
end

def join_game
    response = RestClient.post '/localhost:8080/join', :data => {name: @name}.to_json, :accept => :json
    puts JSON.parse(response,:symbolize_names => true)
end

Rest-Client output in irb..

客户端视图（不工作）..

%script{:src => "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"}
%script{:src => "https://code.jquery.com/jquery-1.10.2.js"}
%body
%div{"ng-app" => "myApp", "ng-controller" => "myCtrl"}
Name:
%input{:name => "uname", "ng-model" => "uname", :type => "text"}
%button{"ng-click" => "SendData()"} Submit
{{ PostDataResponse }}
%script{:src => "casApp.js"}
%script{:src => "casCtrl.js"}

Angularjs 控制器（不工作）..

app.controller("myCtrl", function ($scope, $http) {
$scope.SendData = function () {
var data = $.param({
  data: {name: $scope.uname }
});

var config = {
    headers : {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
    }
}

$http.post('http://localhost:8080/join', data, config)
.success(function (data, status, headers, config) {
    $scope.PostDataResponse = data;
})

Answer 1

我没有仔细检查您的所有代码，但最后我发现语法无效。您应该注意缺少的小.，以便调用success 方法。

$http.post('http://localhost:8080/join', data, config)
.success(function (data, status, headers, config) {
  $scope.PostDataResponse = data;
})

另外，您不必将$.param 与jquery 一起使用，您可以让 Angular 完成这项工作。你只需这样做：

var data = {
  data: {name: $scope.uname }
};

另外，success 函数只有一个参数，它是一个对象。

所以你必须这样做：

.success(function(res){
        $scope.PostDataResponse = res.data;
    });