Question

有人可以帮我吗？这已经让我的大脑停留了很长一段时间，我用Google搜索并搜索了Stack的解决方案，但却无法找到任何有用的东西。

我是网络开发人员的新手，但我一直专注于后端，但我想尝试一下前端，所以我决定（使用在线教程）创建一个服务器/客户端休息api使用与服务器上的所有游戏逻辑（ruby / sinatra）的纸牌游戏，它接受/发送json数据到客户端（angularjs）。我可以使用rest-client成功测试api，但似乎无法使用angularjs使其工作。下面是我成功的休息客户端数据验证和我失败的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]}"

休息 - 客户端代码..

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，您可以让角色完成工作。你这样做：

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

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

所以你必须这样做：

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

无法向API服务器发送/接收发布数据Anugularjs

1 个答案: