APIサーバーに投稿データを送受信できません。

Question

誰かが私を助けてくれませんか？これはまもなく私の脳を台無しにしているし、私はグーグルとスタックのソリューションを探してきたが、何かを見つけることができませんでした。

私はかなり新しいWeb開発者ですが、私はバックエンドにもっと焦点を当てていましたが、ちょっとしたフロントエンドを試したかったので、（オンラインチュートリアルを使って）サーバー/クライアントの残りのAPIを作成することにしましたjsonデータをクライアント（angeljs）と受け渡しするサーバ上のすべてのゲームロジック（ruby/sinatra）を持つカードゲーム。私は正常にクライアントを使用してAPIをテストすることができますが、それをangjsを使用して動作するように見えることはできません。以下は、私の成功したクライアントのデータの検証と、失敗したanglejsのクライアントサイドアプリケーションです。私は単純に（私は思ったので）フォーム/テキストボックスにプレーヤー名を入力してそのデータをサーバーに送信し、サーバーをrest-clientと同様にセットアップでデータに応答させたいと思っていました。 Thanks and FYI私は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; 
}) 

はまた、あなたは、角度の仕事をやらせることができ、jqueryと$.paramを行う必要はありません。

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

また、成功関数には引数が1つしかありません。これはオブジェクトです。

あなたがしなければならない。

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